"use client";

import React, { useState } from "react";
import { 
  Mail, 
  Phone, 
  MapPin, 
  Globe, 
  Send, 
  CheckCircle2, 
  Clock, 
  ShieldCheck 
} from "lucide-react";
import confetti from "canvas-confetti";
import { SectionCorners } from "@/components/ui/SectionCorner";
import { ShinyButton } from "@/components/ui/ShinyButton";
import { BlinkingSquares } from "@/components/ui/BlinkingSquares";
import { useAppStore } from "@/lib/store";

export default function ContactPage() {
  const { addLead, formatPrice } = useAppStore();
  const [formData, setFormData] = useState({
    full_name: "",
    email: "",
    phone: "",
    company: "",
    service_interest: "Web Development",
    estimated_budget: "PKR 50,000 - 150,000",
    timeline: "Within 2-4 Weeks",
    project_description: "",
  });

  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isSubmitted, setIsSubmitted] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!formData.full_name || !formData.email || !formData.project_description) {
      alert("Please fill in all required fields.");
      return;
    }

    setIsSubmitting(true);
    try {
      await addLead(formData);
      setIsSubmitted(true);
      try {
        confetti({
          particleCount: 80,
          spread: 60,
          origin: { y: 0.6 },
        });
      } catch (err) {
        // Safe fallback
      }
    } catch (error) {
      console.error("Failed to submit lead", error);
      alert("Submission error. Please call +92 335 7758256 directly.");
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="mx-auto flex min-h-screen w-[calc(100%-1.5rem)] max-w-[1440px] flex-col border-x border-border sm:w-[calc(100%-2.5rem)] lg:w-[calc(100%-3rem)] bg-background">
      {/* Header */}
      <section className="relative border-b border-border p-6 sm:p-10 lg:p-14 overflow-hidden">
        <SectionCorners />
        <BlinkingSquares
          squareSize={20}
          gap={8}
          color="#024d37"
          maxOpacity={0.35}
          minOpacity={0.03}
          blinkProbability={0.02}
          className="opacity-50"
        />

        <div className="relative z-10 max-w-3xl">
          <div className="inline-flex items-center gap-2 rounded-full border border-border bg-muted px-3.5 py-1 text-xs font-mono font-medium text-foreground mb-6">
            // INITIATE PROJECT
          </div>
          <h1 className="text-4xl font-medium leading-[1.05] tracking-tighter text-foreground sm:text-5xl lg:text-[3.8rem]">
            Let’s engineer your next digital breakthrough.
          </h1>
          <p className="mt-4 text-sm text-muted-foreground leading-relaxed sm:text-base">
            Fill out the project scope form below or contact our executive team directly for immediate architecture review.
          </p>
        </div>
      </section>

      {/* Main Content Split */}
      <section className="relative p-6 sm:p-10 lg:p-14">
        <SectionCorners />

        <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-start">
          {/* Left Column: Direct Info & Guarantees */}
          <div className="lg:col-span-5 space-y-6">
            <div className="rounded-2xl border border-border bg-card p-6 sm:p-8 space-y-6">
              <span className="font-mono text-xs text-muted-foreground uppercase tracking-[0.12em] block">
                // DIRECT CHANNELS
              </span>

              <div className="space-y-3 font-mono text-xs">
                <a
                  href="tel:+923357758256"
                  className="flex items-center gap-3 rounded-xl border border-border bg-muted p-4 hover:border-foreground/40 transition-colors"
                >
                  <Phone className="h-4 w-4 text-[#024d37] shrink-0" />
                  <div>
                    <span className="text-[10px] text-muted-foreground block">PHONE & WHATSAPP</span>
                    <span className="font-semibold text-foreground">+92 335 7758256</span>
                  </div>
                </a>

                <a
                  href="mailto:info@aethersoftinnovations.com"
                  className="flex items-center gap-3 rounded-xl border border-border bg-muted p-4 hover:border-foreground/40 transition-colors"
                >
                  <Mail className="h-4 w-4 text-[#024d37] shrink-0" />
                  <div>
                    <span className="text-[10px] text-muted-foreground block">OFFICIAL INQUIRY EMAIL</span>
                    <span className="font-semibold text-foreground">info@aethersoftinnovations.com</span>
                  </div>
                </a>

                <div className="flex items-center gap-3 rounded-xl border border-border bg-muted p-4">
                  <MapPin className="h-4 w-4 text-[#024d37] shrink-0" />
                  <div>
                    <span className="text-[10px] text-muted-foreground block">HEADQUARTERS</span>
                    <span className="font-semibold text-foreground">Karachi, Pakistan (Global Remote)</span>
                  </div>
                </div>

                <div className="flex items-center gap-3 rounded-xl border border-border bg-muted p-4">
                  <Globe className="h-4 w-4 text-[#024d37] shrink-0" />
                  <div>
                    <span className="text-[10px] text-muted-foreground block">OFFICIAL DOMAIN</span>
                    <span className="font-semibold text-foreground">www.aethersoftinnovations.com</span>
                  </div>
                </div>
              </div>
            </div>

            <div className="rounded-2xl border border-border bg-muted/40 p-6 space-y-3 font-mono text-xs text-muted-foreground">
              <div className="text-foreground font-semibold">// COMMITMENTS</div>
              <div>• Responses within 4 business hours</div>
              <div>• Strict NDA & Intellectual Property protection</div>
              <div>• Direct communication with Lead Tech Architects</div>
            </div>
          </div>

          {/* Right Column: Lead Form */}
          <div className="lg:col-span-7">
            <div className="rounded-2xl border border-border bg-card p-6 sm:p-10">
              {isSubmitted ? (
                <div className="py-12 text-center space-y-4">
                  <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-muted border border-border text-[#024d37]">
                    <CheckCircle2 className="h-7 w-7" />
                  </div>
                  <h3 className="text-2xl font-semibold text-foreground">
                    Inquiry Received
                  </h3>
                  <p className="text-xs text-muted-foreground max-w-md mx-auto leading-relaxed">
                    Our lead architect has received your submission and will reach out via WhatsApp or Email within 4 business hours.
                  </p>
                  <div className="pt-4">
                    <button
                      onClick={() => setIsSubmitted(false)}
                      className="rounded-full border border-border bg-muted px-6 py-2.5 font-mono text-xs text-foreground hover:bg-border"
                    >
                      Submit Another Inquiry
                    </button>
                  </div>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-5">
                  <div className="border-b border-border pb-4 mb-4">
                    <span className="font-mono text-xs text-muted-foreground uppercase tracking-[0.12em]">
                      // PROJECT SCOPING FORM
                    </span>
                    <h3 className="text-xl font-semibold text-foreground mt-1">
                      Request Architecture Proposal & Pricing
                    </h3>
                  </div>

                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 font-mono text-xs">
                    <div>
                      <label className="text-muted-foreground block mb-1.5">[NAME] *</label>
                      <input
                        type="text"
                        required
                        placeholder="e.g. Farhan Siddiqui"
                        value={formData.full_name}
                        onChange={(e) => setFormData({ ...formData, full_name: e.target.value })}
                        className="w-full rounded-xl border border-border bg-muted px-3.5 py-3 text-foreground placeholder:text-muted-foreground/60 focus:border-foreground focus:outline-none"
                      />
                    </div>

                    <div>
                      <label className="text-muted-foreground block mb-1.5">[EMAIL] *</label>
                      <input
                        type="email"
                        required
                        placeholder="farhan@company.pk"
                        value={formData.email}
                        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                        className="w-full rounded-xl border border-border bg-muted px-3.5 py-3 text-foreground placeholder:text-muted-foreground/60 focus:border-foreground focus:outline-none"
                      />
                    </div>
                  </div>

                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 font-mono text-xs">
                    <div>
                      <label className="text-muted-foreground block mb-1.5">[PHONE / WHATSAPP]</label>
                      <input
                        type="text"
                        placeholder="+92 300 1234567"
                        value={formData.phone}
                        onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                        className="w-full rounded-xl border border-border bg-muted px-3.5 py-3 text-foreground placeholder:text-muted-foreground/60 focus:border-foreground focus:outline-none"
                      />
                    </div>

                    <div>
                      <label className="text-muted-foreground block mb-1.5">[COMPANY / BRAND]</label>
                      <input
                        type="text"
                        placeholder="e.g. MediCare Hub"
                        value={formData.company}
                        onChange={(e) => setFormData({ ...formData, company: e.target.value })}
                        className="w-full rounded-xl border border-border bg-muted px-3.5 py-3 text-foreground placeholder:text-muted-foreground/60 focus:border-foreground focus:outline-none"
                      />
                    </div>
                  </div>

                  <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 font-mono text-xs">
                    <div>
                      <label className="text-muted-foreground block mb-1.5">[SERVICE]</label>
                      <select
                        value={formData.service_interest}
                        onChange={(e) => setFormData({ ...formData, service_interest: e.target.value })}
                        className="w-full rounded-xl border border-border bg-muted px-3 py-3 text-foreground focus:border-foreground focus:outline-none"
                      >
                        <option value="Web Development">Web Development</option>
                        <option value="Mobile App Development">Mobile App Development</option>
                        <option value="SEO & Digital Marketing">SEO & Digital Marketing</option>
                        <option value="UI/UX Design">UI/UX Design Systems</option>
                        <option value="PharmaCore POS & ERP">PharmaCore POS & ERP</option>
                        <option value="AetherDine Restaurant Suite">AetherDine Restaurant Suite</option>
                        <option value="TaleemiNizaam School LMS">TaleemiNizaam School LMS</option>
                        <option value="Custom Enterprise Software">Custom Software</option>
                      </select>
                    </div>

                    <div>
                      <label className="text-muted-foreground block mb-1.5">[BUDGET]</label>
                      <select
                        value={formData.estimated_budget}
                        onChange={(e) => setFormData({ ...formData, estimated_budget: e.target.value })}
                        className="w-full rounded-xl border border-border bg-muted px-3 py-3 text-foreground focus:border-foreground focus:outline-none"
                      >
                        <option value="Tier 1">{formatPrice(50000)} - {formatPrice(150000)}</option>
                        <option value="Tier 2">{formatPrice(150000)} - {formatPrice(300000)}</option>
                        <option value="Tier 3">{formatPrice(300000)} - {formatPrice(600000)}</option>
                        <option value="Enterprise">{formatPrice(600000)}+ (Enterprise)</option>
                      </select>
                    </div>

                    <div>
                      <label className="text-muted-foreground block mb-1.5">[TIMELINE]</label>
                      <select
                        value={formData.timeline}
                        onChange={(e) => setFormData({ ...formData, timeline: e.target.value })}
                        className="w-full rounded-xl border border-border bg-muted px-3 py-3 text-foreground focus:border-foreground focus:outline-none"
                      >
                        <option value="Immediate (< 2 Weeks)">&lt; 2 Weeks</option>
                        <option value="Within 2-4 Weeks">2-4 Weeks</option>
                        <option value="1-2 Months">1-2 Months</option>
                        <option value="Flexible">Flexible</option>
                      </select>
                    </div>
                  </div>

                  <div className="font-mono text-xs">
                    <label className="text-muted-foreground block mb-1.5">[REQUIREMENTS] *</label>
                    <textarea
                      required
                      rows={4}
                      placeholder="Outline core objectives, integrations, and target launch window..."
                      value={formData.project_description}
                      onChange={(e) => setFormData({ ...formData, project_description: e.target.value })}
                      className="w-full rounded-xl border border-border bg-muted px-3.5 py-3 text-foreground placeholder:text-muted-foreground/60 focus:border-foreground focus:outline-none font-sans text-xs"
                    />
                  </div>

                  <button
                    type="submit"
                    disabled={isSubmitting}
                    className="w-full rounded-full bg-foreground py-3.5 font-mono text-xs font-semibold uppercase tracking-[0.12em] text-background hover:opacity-90 transition-opacity disabled:opacity-50"
                  >
                    {isSubmitting ? "Encrypting & Sending to Supabase..." : "Submit Proposal Request →"}
                  </button>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}