"use client"

import * as React from "react"
import { useRouter } from "next/navigation"
import { ArrowLeft, User, Building2, Phone, Mail, Briefcase, MapPin, DollarSign, Target, Save, X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { ReactSelect } from "@/components/ui/react-select"
import { toast } from "sonner"
import { cn } from "@/lib/utils"

const LIFECYCLE_STAGE_OPTIONS = [
    { value: "lead", label: "New Lead" },
    { value: "qualified", label: "Qualified" },
    { value: "prospect", label: "Prospect" },
    { value: "customer", label: "Customer" },
]

const ASSIGNED_REP_OPTIONS = [
    { value: "zara", label: "Zara Ahmed (Team Alpha)" },
    { value: "omar", label: "Omar Farooq (Team Alpha)" },
    { value: "sana", label: "Sana Malik (Team Beta)" },
    { value: "hira", label: "Hira Qureshi (Team Gamma)" },
]

export default function AddContactPage() {
    const router = useRouter()
    const [loading, setLoading] = React.useState(false)
    const [lifecycleStage, setLifecycleStage] = React.useState("lead")
    const [assignedRep, setAssignedRep] = React.useState("zara")

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault()
        setLoading(true)

        // Mock save delay
        setTimeout(() => {
            setLoading(false)
            toast.success("Contact created successfully!")
            router.push("/contacts")
        }, 1200)
    }

    return (
        <div className="flex flex-col h-full gap-6 p-2 md:p-6 animate-in fade-in slide-in-from-bottom-4 duration-500 overflow-y-auto scrollbar-themed">
            {/* Header / Breadcrumb */}
            <div className="flex items-center justify-between border-b border-border/60 pb-6">
                <div className="flex items-center gap-4">
                    <Button
                        variant="ghost"
                        size="icon"
                        onClick={() => router.back()}
                        className="rounded-full hover:bg-white/10 text-gray-700"
                    >
                        <ArrowLeft size={20} />
                    </Button>
                    <div className="flex flex-col">
                        <h1 className="text-[21px] font-extrabold text-text font-['Lexend'] tracking-tight">Add New Contact</h1>
                        <p className="text-[12px] text-gray-700 font-normal mt-0.5">Enter the details to create a new salesperson or lead in your CRM.</p>
                    </div>
                </div>
            </div>

            <form onSubmit={handleSubmit} className="flex flex-col gap-6">
                <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
                    {/* Basic Information */}
                    <div className="bg-white rounded-[24px] border border-border shadow-premium p-6 flex flex-col gap-6">
                        <div className="flex items-center gap-2 pb-2 border-b border-border/40">
                            <div className="size-8 rounded-lg bg-accent/10 flex items-center justify-center text-accent">
                                <User size={16} />
                            </div>
                            <h2 className="text-[15px] font-bold text-text font-['Lexend']">Basic Information</h2>
                        </div>

                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div className="flex flex-col gap-2">
                                <Label htmlFor="name" className="text-[11px] font-bold uppercase tracking-widest text-gray-600 ml-1">Full Name</Label>
                                <Input id="name" placeholder="e.g. Ali Khan" required className="bg-bg/50 border-border focus:border-accent rounded-xl h-11" />
                            </div>
                            <div className="flex flex-col gap-2">
                                <Label htmlFor="email" className="text-[11px] font-bold uppercase tracking-widest text-gray-600 ml-1">Email Address</Label>
                                <Input id="email" type="email" placeholder="ali@jumppace.com" required className="bg-bg/50 border-border focus:border-accent rounded-xl h-11" />
                            </div>
                        </div>

                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div className="flex flex-col gap-2">
                                <Label htmlFor="phone" className="text-[11px] font-bold uppercase tracking-widest text-gray-600 ml-1">Phone Number</Label>
                                <div className="relative">
                                    <Phone size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
                                    <Input id="phone" placeholder="+92 300 1234567" className="pl-9 bg-bg/50 border-border focus:border-accent rounded-xl h-11" />
                                </div>
                            </div>
                            <div className="flex flex-col gap-2">
                                <Label htmlFor="title" className="text-[11px] font-bold uppercase tracking-widest text-gray-600 ml-1">Job Title</Label>
                                <Input id="title" placeholder="e.g. Sales Manager" className="bg-bg/50 border-border focus:border-accent rounded-xl h-11" />
                            </div>
                        </div>
                    </div>

                    {/* Company & Location */}
                    <div className="bg-white rounded-[24px] border border-border shadow-premium p-6 flex flex-col gap-6">
                        <div className="flex items-center gap-2 pb-2 border-b border-border/40">
                            <div className="size-8 rounded-lg bg-green-500/10 flex items-center justify-center text-green-600">
                                <Building2 size={16} />
                            </div>
                            <h2 className="text-[15px] font-bold text-text font-['Lexend']">Company & Location</h2>
                        </div>

                        <div className="flex flex-col gap-2">
                            <Label htmlFor="company" className="text-[11px] font-bold uppercase tracking-widest text-gray-600 ml-1">Company Name</Label>
                            <Input id="company" placeholder="e.g. Nexus Solutions" className="bg-bg/50 border-border focus:border-accent rounded-xl h-11" />
                        </div>

                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div className="flex flex-col gap-2">
                                <Label htmlFor="city" className="text-[11px] font-bold uppercase tracking-widest text-gray-600 ml-1">City</Label>
                                <div className="relative">
                                    <MapPin size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
                                    <Input id="city" placeholder="e.g. Karachi" className="pl-9 bg-bg/50 border-border focus:border-accent rounded-xl h-11" />
                                </div>
                            </div>
                            <div className="flex flex-col gap-2">
                                <Label htmlFor="country" className="text-[11px] font-bold uppercase tracking-widest text-gray-600 ml-1">Country</Label>
                                <Input id="country" placeholder="e.g. Pakistan" defaultValue="Pakistan" className="bg-bg/50 border-border focus:border-accent rounded-xl h-11" />
                            </div>
                        </div>
                    </div>

                    {/* Sales Information */}
                    <div className="bg-white rounded-[24px] border border-border shadow-premium p-6 flex flex-col gap-6">
                        <div className="flex items-center gap-2 pb-2 border-b border-border/40">
                            <div className="size-8 rounded-lg bg-orange-500/10 flex items-center justify-center text-orange-600">
                                <Target size={16} />
                            </div>
                            <h2 className="text-[15px] font-bold text-text font-['Lexend']">Sales Information</h2>
                        </div>

                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div className="flex flex-col gap-2">
                                <Label className="text-[11px] font-bold uppercase tracking-widest text-gray-600 ml-1">Lifecycle Stage</Label>
                                <ReactSelect
                                    value={lifecycleStage}
                                    onValueChange={setLifecycleStage}
                                    options={LIFECYCLE_STAGE_OPTIONS}
                                    placeholder="Select stage"
                                    triggerClassName="h-11 min-h-11 rounded-xl bg-bg/50 border-border focus:ring-accent/20"
                                    contentClassName="rounded-xl"
                                />
                            </div>
                            <div className="flex flex-col gap-2">
                                <Label htmlFor="value" className="text-[11px] font-bold uppercase tracking-widest text-gray-600 ml-1">Deal Value (EST)</Label>
                                <div className="relative">
                                    <DollarSign size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
                                    <Input id="value" type="number" placeholder="5000" className="pl-9 bg-bg/50 border-border focus:border-accent rounded-xl h-11" />
                                </div>
                            </div>
                        </div>

                        <div className="flex flex-col gap-2">
                            <Label className="text-[11px] font-bold uppercase tracking-widest text-gray-600 ml-1">Assigned Sales Rep</Label>
                            <ReactSelect
                                value={assignedRep}
                                onValueChange={setAssignedRep}
                                options={ASSIGNED_REP_OPTIONS}
                                placeholder="Assign representative"
                                triggerClassName="h-11 min-h-11 rounded-xl bg-bg/50 border-border focus:ring-accent/20"
                                contentClassName="rounded-xl"
                            />
                        </div>
                    </div>

                    {/* Additional Notes */}
                    <div className="bg-white rounded-[24px] border border-border shadow-premium p-6 flex flex-col gap-6">
                        <div className="flex items-center gap-2 pb-2 border-b border-border/40">
                            <div className="size-8 rounded-lg bg-blue-500/10 flex items-center justify-center text-blue-600">
                                <Briefcase size={16} />
                            </div>
                            <h2 className="text-[15px] font-bold text-text font-['Lexend']">Internal Notes</h2>
                        </div>
                        <div className="flex flex-col gap-2 h-full">
                            <Label htmlFor="notes" className="text-[11px] font-bold uppercase tracking-widest text-gray-600 ml-1">Confidential Notes</Label>
                            <textarea
                                id="notes"
                                placeholder="Add any specific requirements or details..."
                                className="flex-1 w-full p-4 bg-bg/50 border border-border rounded-2xl text-[13px] font-normal outline-none focus:border-accent transition-all resize-none min-h-[120px]"
                            />
                        </div>
                    </div>
                </div>

                {/* Form Actions */}
                <div className="flex items-center justify-end gap-3 pb-10">
                    <Button
                        type="button"
                        variant="outline"
                        onClick={() => router.back()}
                        className="h-12 px-8 rounded-xl font-bold text-[13px] border-border hover:bg-gray-50 bg-white"
                    >
                        <X size={16} className="mr-2" /> Cancel
                    </Button>
                    <Button
                        type="submit"
                        disabled={loading}
                        className="h-12 px-10 rounded-xl font-bold text-[13px] bg-accent text-white shadow-premium hover:scale-[1.02] active:scale-[0.98] transition-all"
                    >
                        {loading ? (
                            <div className="flex items-center gap-2">
                                <div className="h-4 w-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                                <span>Saving...</span>
                            </div>
                        ) : (
                            <div className="flex items-center gap-2">
                                <Save size={16} />
                                <span>Create Contact</span>
                            </div>
                        )}
                    </Button>
                </div>
            </form>
        </div>
    )
}