"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FooterSimple from '@/components/sections/footer/FooterSimple';

export default function ApplicationFormPage() {
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // In a real application, you would send this data to a backend.
    alert("Application Submitted! Redirecting to payment...");
    // Simulate redirection to a payment gateway
    setTimeout(() => {
      console.log("Redirecting to payment for AED 500...");
      // window.location.href = "/payment-gateway-url";
    }, 1000);
  };

  // Navigation items for NavbarStyleCentered, adjusted to link back to homepage sections
  const applicationFormNavItems = [
    { name: "Properties", id: "/#properties" },
    { name: "About", id: "/#about" },
    { name: "Services", id: "/#services" },
    { name: "Team", id: "/#team" },
    { name: "Testimonials", id: "/#testimonials" },
    { name: "Contact", id: "/#contact" }
  ];

  // Footer columns for FooterSimple, adjusted for consistency
  const commonFooterColumns = [
    {
      title: "Company",      items: [
        { label: "About Us", href: "/#about" },
        { label: "Our Services", href: "/#services" },
        { label: "Executive Team", href: "/#team" },
        { label: "Properties", href: "/#properties" },
        { label: "Contact", href: "/#contact" },
        { label: "Apply Now", href: "/application-form" }
      ]
    },
    {
      title: "Resources",      items: [
        { label: "Investment Guide", href: "/#" },
        { label: "Market Reports", href: "/#" },
        { label: "FAQ", href: "/#" },
        { label: "Blog", href: "/#" }
      ]
    },
    {
      title: "Legal",      items: [
        { label: "Privacy Policy", href: "/#" },
        { label: "Terms of Service", href: "/#" },
        { label: "Cookie Policy", href: "/#" }
      ]
    },
    {
      title: "Connect",      items: [
        { label: "LinkedIn", href: "#" },
        { label: "Instagram", href: "#" },
        { label: "WhatsApp", href: "#" }
      ]
    }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="mediumLarge"
      background="none"
      cardStyle="glass-elevated"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Luxe Properties"
          navItems={applicationFormNavItems}
          button={{ text: "Schedule Viewing", href: "/#contact" }}
        />
      </div>

      <main className="relative z-10 py-20 px-4 sm:px-6 lg:px-8 bg-background min-h-[calc(100vh-6rem)]">
        <div className="max-w-4xl mx-auto">
          <h1 className="text-5xl md:text-6xl font-extrabold text-center mb-6 leading-tight text-foreground">
            Property Application Form
          </h1>
          <p className="text-center text-lg md:text-xl text-foreground/70 mb-12">
            Complete the form below to apply for our exclusive properties.
          </p>

          <div className="bg-card p-8 rounded-xl shadow-2xl space-y-8 border border-border">
            <form onSubmit={handleSubmit} className="space-y-6">
              {/* Personal Information */}
              <div>
                <h2 className="text-2xl font-semibold text-foreground mb-4">Personal Information</h2>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <label htmlFor="fullName" className="block text-sm font-medium text-foreground mb-2">Full Name</label>
                    <input
                      type="text"
                      id="fullName"
                      name="fullName"
                      required
                      className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
                    />
                  </div>
                  <div>
                    <label htmlFor="emailAddress" className="block text-sm font-medium text-foreground mb-2">Email Address</label>
                    <input
                      type="email"
                      id="emailAddress"
                      name="emailAddress"
                      required
                      className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
                    />
                  </div>
                  <div>
                    <label htmlFor="phoneNumber" className="block text-sm font-medium text-foreground mb-2">Phone Number</label>
                    <input
                      type="tel"
                      id="phoneNumber"
                      name="phoneNumber"
                      required
                      className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
                    />
                  </div>
                  <div className="md:col-span-2"> {/* Street Address takes full width */}
                    <label htmlFor="streetAddress" className="block text-sm font-medium text-foreground mb-2">Street Address</label>
                    <input
                      type="text"
                      id="streetAddress"
                      name="streetAddress"
                      required
                      className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
                    />
                  </div>
                  <div>
                    <label htmlFor="city" className="block text-sm font-medium text-foreground mb-2">City</label>
                    <input
                      type="text"
                      id="city"
                      name="city"
                      required
                      className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
                    />
                  </div>
                  <div>
                    <label htmlFor="stateProvince" className="block text-sm font-medium text-foreground mb-2">State/Province</label>
                    <input
                      type="text"
                      id="stateProvince"
                      name="stateProvince"
                      required
                      className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
                    />
                  </div>
                  <div>
                    <label htmlFor="postalCode" className="block text-sm font-medium text-foreground mb-2">Postal Code</label>
                    <input
                      type="text"
                      id="postalCode"
                      name="postalCode"
                      required
                      className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
                    />
                  </div>
                  <div>
                    <label htmlFor="country" className="block text-sm font-medium text-foreground mb-2">Country</label>
                    <input
                      type="text"
                      id="country"
                      name="country"
                      required
                      className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
                    />
                  </div>
                </div>
              </div>

              {/* Employment Information */}
              <div>
                <h2 className="text-2xl font-semibold text-foreground mb-4">Employment Information</h2>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <label htmlFor="employmentStatus" className="block text-sm font-medium text-foreground mb-2">Employment Status</label>
                    <select
                      id="employmentStatus"
                      name="employmentStatus"
                      required
                      className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
                    >
                      <option value="">Select status</option>
                      <option value="employed">Employed</option>
                      <option value="self-employed">Self-employed</option>
                      <option value="unemployed">Unemployed</option>
                      <option value="student">Student</option>
                      <option value="retired">Retired</option>
                    </select>
                  </div>
                  <div>
                    <label htmlFor="monthlyIncome" className="block text-sm font-medium text-foreground mb-2">Monthly Income (AED)</label>
                    <input
                      type="number"
                      id="monthlyIncome"
                      name="monthlyIncome"
                      required
                      min="0"
                      className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
                    />
                  </div>
                  <div>
                    <label htmlFor="occupation" className="block text-sm font-medium text-foreground mb-2">Occupation</label>
                    <input
                      type="text"
                      id="occupation"
                      name="occupation"
                      required
                      className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
                    />
                  </div>
                  <div>
                    <label htmlFor="employer" className="block text-sm font-medium text-foreground mb-2">Employer</label>
                    <input
                      type="text"
                      id="employer"
                      name="employer"
                      required
                      className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
                    />
                  </div>
                </div>
              </div>

              {/* Document Upload */}
              <div>
                <h2 className="text-2xl font-semibold text-foreground mb-4">Document Upload</h2>
                <p className="text-sm text-foreground/80 mb-4">Please upload necessary documents (Max file size 5MB per file).</p>
                <div className="space-y-4">
                  <div>
                    <label htmlFor="idDocument" className="block text-sm font-medium text-foreground mb-2">ID Document (e.g., Passport, Emirates ID)</label>
                    <input
                      type="file"
                      id="idDocument"
                      name="idDocument"
                      required
                      accept=".pdf,.jpg,.jpeg,.png"
                      className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-primary-cta file:text-white hover:file:bg-primary-cta/90"
                    />
                  </div>
                  <div>
                    <label htmlFor="proofOfIncome" className="block text-sm font-medium text-foreground mb-2">Proof of Income (e.g., Salary Certificate, Bank Statement)</label>
                    <input
                      type="file"
                      id="proofOfIncome"
                      name="proofOfIncome"
                      required
                      accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
                      className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-primary-cta file:text-white hover:file:bg-primary-cta/90"
                    />
                  </div>
                </div>
              </div>

              {/* Application Fee Explanation */}
              <div className="pt-4 border-t border-border">
                <h3 className="text-xl font-semibold text-foreground mb-2">Application Fee</h3>
                <p className="text-sm text-foreground/80">
                  A non-refundable application fee of <strong className="text-primary-cta">AED 500</strong> is required to process your application. This fee covers administrative costs and a comprehensive background check. You will be redirected to a secure payment gateway after submitting this form.
                </p>
              </div>

              <button
                type="submit"
                className="w-full py-3 px-6 bg-primary-cta text-white font-bold rounded-lg hover:bg-primary-cta/90 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-cta focus:ring-offset-2"
              >
                Submit Application
              </button>
            </form>

            {/* Confirmation Text - Note: In a real app, this would be conditionally rendered after successful submission */}
            <div className="text-center pt-8 border-t border-border ">
              <h2 className="text-2xl font-semibold text-foreground mb-4">Thank You for Your Application!</h2>
              <p className="text-foreground/80">
                Your application has been received and is currently under review. Please check your email for a confirmation and further instructions regarding the payment of the application fee. We appreciate your patience.
              </p>
            </div>
          </div>
        </div>
      </main>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={commonFooterColumns}
          bottomLeftText="© 2025 Luxe Properties Dubai. All rights reserved."
          bottomRightText="Luxury Real Estate Excellence"
        />
      </div>
    </ThemeProvider>
  );
}
