"use client"

import * as React from "react"
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from "@/components/ui/dialog"
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 { Contact } from "./types"
import { User2, Mail, Phone, Building2, Briefcase, Plus, Target, Globe, MapPin, DollarSign } from "lucide-react"
import { formatTeamLabelForUi } from "@/lib/deal-display"

interface AddContactModalProps {
    isOpen: boolean
    onClose: () => void
    onCreate: (contact: Partial<Contact>) => void
    teams: any[] | undefined
}

const STAGES = ['Prospecting', 'Proposal Sent', 'Qualified', 'Negotiation', 'Closed Lost', 'Closed Won']

const LANGUAGE_OPTIONS = [
    { value: "English", label: "English" },
    { value: "Urdu", label: "Urdu" },
    { value: "Arabic", label: "Arabic" },
    { value: "French", label: "French" },
    { value: "Spanish", label: "Spanish" },
]

const STAGE_OPTIONS = STAGES.map((s) => ({ value: s, label: s }))

export function AddContactModal({
    isOpen,
    onClose,
    onCreate,
    teams
}: AddContactModalProps) {
    const [formData, setFormData] = React.useState({
        name: "",
        email: "",
        phone: "",
        company: "",
        title: "",
        stage: STAGES[0],
        team: "alpha",
        dealValue: "",
        website: "",
        address: "",
        city: "",
        state: "",
        country: "",
        zipCode: "",
        defaultLanguage: "English",
        description: ""
    })

    const teamOptions = React.useMemo(
        () =>
            teams?.map((t: { id: string; name: string }) => ({
                value: t.name.toLowerCase().split(' ')[1] || t.name.toLowerCase(),
                label: formatTeamLabelForUi(t.name),
            })) ?? [],
        [teams],
    )

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault()
        if (formData.name && formData.email) {
            onCreate({
                name: formData.name,
                email: formData.email,
                phone: formData.phone,
                company: formData.company,
                title: formData.title,
                stage: formData.stage,
                team: formData.team as any,
                dealValue: parseFloat(formData.dealValue) || 0,
                status: 'Active',
                website: formData.website,
                address: formData.address,
                city: formData.city,
                state: formData.state,
                country: formData.country,
                zipCode: formData.zipCode,
                defaultLanguage: formData.defaultLanguage,
                description: formData.description
            })
            onClose()
            setFormData({
                name: "",
                email: "",
                phone: "",
                company: "",
                title: "",
                stage: STAGES[0],
                team: "alpha",
                dealValue: "",
                website: "",
                address: "",
                city: "",
                state: "",
                country: "",
                zipCode: "",
                defaultLanguage: "English",
                description: ""
            })
        }
    }

    return (
        <Dialog open={isOpen} onOpenChange={onClose}>
            <DialogContent className="sm:max-w-[700px] p-0 overflow-hidden animate-in zoom-in-95 duration-300">
                <div className="bg-accent/5 px-8 pt-8 pb-6 border-b border-accent/10">
                    <DialogHeader>
                        <DialogTitle className="text-[24px] font-extrabold font-['Lexend'] text-text tracking-tight flex items-center gap-3">
                            <div className="size-10 rounded-2xl bg-accent flex items-center justify-center text-white">
                                <Plus size={22} strokeWidth={3} />
                            </div>
                            Add New Contact
                        </DialogTitle>
                        <DialogDescription className="text-[13px] font-['Lexend_Deca'] text-gray-500 mt-1 ml-13">
                            Register a new lead or contact in your CRM with full details.
                        </DialogDescription>
                    </DialogHeader>
                </div>

                <form onSubmit={handleSubmit} className="overflow-y-auto max-h-[70vh] p-8 pt-6 space-y-6 scrollbar-themed">
                    <div className="grid grid-cols-2 gap-x-6 gap-y-5">
                        <div className="space-y-2 col-span-2">
                            <Label className="text-[11px] font-bold uppercase tracking-wider text-gray-500 font-['Lexend_Deca'] ml-1 flex items-center gap-1.5">
                                <User2 size={12} className="text-accent" /> Full Name
                            </Label>
                            <Input
                                placeholder="e.g. Ali Khan"
                                className="h-11 rounded-xl border-border/60 font-['Lexend'] text-[14px] px-4 shadow-sm focus:ring-accent/20 bg-bg/10"
                                value={formData.name}
                                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                                required
                            />
                        </div>

                        <div className="space-y-2">
                            <Label className="text-[11px] font-bold uppercase tracking-wider text-gray-500 font-['Lexend_Deca'] ml-1 flex items-center gap-1.5">
                                <Mail size={12} className="text-accent" /> Email Address
                            </Label>
                            <Input
                                type="email"
                                placeholder="name@company.com"
                                className="h-11 rounded-xl border-border/60 font-['Lexend'] text-[14px] px-4 shadow-sm focus:ring-accent/20 bg-bg/10"
                                value={formData.email}
                                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                                required
                            />
                        </div>

                        <div className="space-y-2">
                            <Label className="text-[11px] font-bold uppercase tracking-wider text-gray-500 font-['Lexend_Deca'] ml-1 flex items-center gap-1.5">
                                <Phone size={12} className="text-accent" /> Phone Number
                            </Label>
                            <Input
                                placeholder="+92 3..."
                                className="h-11 rounded-xl border-border/60 font-['Lexend'] text-[14px] px-4 shadow-sm focus:ring-accent/20 bg-bg/10"
                                value={formData.phone}
                                onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                            />
                        </div>

                        <div className="space-y-2">
                            <Label className="text-[11px] font-bold uppercase tracking-wider text-gray-500 font-['Lexend_Deca'] ml-1 flex items-center gap-1.5">
                                <Globe size={12} className="text-accent" /> Website
                            </Label>
                            <Input
                                placeholder="https://..."
                                className="h-11 rounded-xl border-border/60 font-['Lexend'] text-[14px] px-4 shadow-sm focus:ring-accent/20 bg-bg/10"
                                value={formData.website}
                                onChange={(e) => setFormData({ ...formData, website: e.target.value })}
                            />
                        </div>

                        <div className="space-y-2">
                            <Label className="text-[11px] font-bold uppercase tracking-wider text-gray-500 font-['Lexend_Deca'] ml-1 flex items-center gap-1.5">
                                <Building2 size={12} className="text-accent" /> Company
                            </Label>
                            <Input
                                placeholder="Company name..."
                                className="h-11 rounded-xl border-border/60 font-['Lexend'] text-[14px] px-4 shadow-sm focus:ring-accent/20 bg-bg/10"
                                value={formData.company}
                                onChange={(e) => setFormData({ ...formData, company: e.target.value })}
                            />
                        </div>

                        <div className="space-y-2">
                            <Label className="text-[11px] font-bold uppercase tracking-wider text-gray-500 font-['Lexend_Deca'] ml-1 flex items-center gap-1.5">
                                <Briefcase size={12} className="text-accent" /> Position / Job Title
                            </Label>
                            <Input
                                placeholder="e.g. CEO, Marketing Manager"
                                className="h-11 rounded-xl border-border/60 font-['Lexend'] text-[14px] px-4 shadow-sm focus:ring-accent/20 bg-bg/10"
                                value={formData.title}
                                onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                            />
                        </div>

                        <div className="space-y-2">
                            <Label className="text-[11px] font-bold uppercase tracking-wider text-gray-500 font-['Lexend_Deca'] ml-1 flex items-center gap-1.5">
                                <DollarSign size={12} className="text-accent" /> Lead Value ($)
                            </Label>
                            <Input
                                type="number"
                                placeholder="0.00"
                                className="h-11 rounded-xl border-border/60 font-['Lexend'] text-[14px] px-4 shadow-sm focus:ring-accent/20 bg-bg/10"
                                value={formData.dealValue}
                                onChange={(e) => setFormData({ ...formData, dealValue: e.target.value })}
                            />
                        </div>

                        <div className="space-y-2 col-span-2">
                            <Label className="text-[11px] font-bold uppercase tracking-wider text-gray-500 font-['Lexend_Deca'] ml-1 flex items-center gap-1.5">
                                <MapPin size={12} className="text-accent" /> Street Address
                            </Label>
                            <Input
                                placeholder="123 Main St..."
                                className="h-11 rounded-xl border-border/60 font-['Lexend'] text-[14px] px-4 shadow-sm focus:ring-accent/20 bg-bg/10"
                                value={formData.address}
                                onChange={(e) => setFormData({ ...formData, address: e.target.value })}
                            />
                        </div>

                        <div className="space-y-2">
                            <Label className="text-[11px] font-bold uppercase tracking-wider text-gray-500 font-['Lexend_Deca'] ml-1 flex items-center gap-1.5">
                                City
                            </Label>
                            <Input
                                defaultValue="Karachi"
                                className="h-11 rounded-xl border-border/60 font-['Lexend'] text-[14px] px-4 shadow-sm focus:ring-accent/20 bg-bg/10"
                                value={formData.city}
                                onChange={(e) => setFormData({ ...formData, city: e.target.value })}
                            />
                        </div>

                        <div className="space-y-2">
                            <Label className="text-[11px] font-bold uppercase tracking-wider text-gray-500 font-['Lexend_Deca'] ml-1 flex items-center gap-1.5">
                                State / Province
                            </Label>
                            <Input
                                placeholder="e.g. Sindh"
                                className="h-11 rounded-xl border-border/60 font-['Lexend'] text-[14px] px-4 shadow-sm focus:ring-accent/20 bg-bg/10"
                                value={formData.state}
                                onChange={(e) => setFormData({ ...formData, state: e.target.value })}
                            />
                        </div>

                        <div className="space-y-2">
                            <Label className="text-[11px] font-bold uppercase tracking-wider text-gray-500 font-['Lexend_Deca'] ml-1 flex items-center gap-1.5">
                                Country
                            </Label>
                            <Input
                                placeholder="e.g. Pakistan"
                                className="h-11 rounded-xl border-border/60 font-['Lexend'] text-[14px] px-4 shadow-sm focus:ring-accent/20 bg-bg/10"
                                value={formData.country}
                                onChange={(e) => setFormData({ ...formData, country: e.target.value })}
                            />
                        </div>

                        <div className="space-y-2">
                            <Label className="text-[11px] font-bold uppercase tracking-wider text-gray-500 font-['Lexend_Deca'] ml-1 flex items-center gap-1.5">
                                Zip / Postal Code
                            </Label>
                            <Input
                                placeholder="75500"
                                className="h-11 rounded-xl border-border/60 font-['Lexend'] text-[14px] px-4 shadow-sm focus:ring-accent/20 bg-bg/10"
                                value={formData.zipCode}
                                onChange={(e) => setFormData({ ...formData, zipCode: e.target.value })}
                            />
                        </div>

                        <div className="space-y-2">
                            <Label className="text-[11px] font-bold uppercase tracking-wider text-gray-500 font-['Lexend_Deca'] ml-1 flex items-center gap-1.5">
                                Default Language
                            </Label>
                            <ReactSelect
                                value={formData.defaultLanguage}
                                onValueChange={(val) => setFormData({ ...formData, defaultLanguage: val })}
                                options={LANGUAGE_OPTIONS}
                                triggerClassName="h-11 min-h-11 rounded-xl border-border/60 font-['Lexend'] text-[14px] bg-bg/10"
                                contentClassName="rounded-xl"
                            />
                        </div>

                        <div className="space-y-2">
                            <Label className="text-[11px] font-bold uppercase tracking-wider text-gray-500 font-['Lexend_Deca'] ml-1 flex items-center gap-1.5">
                                <Target size={12} className="text-accent" /> Sales Stage
                            </Label>
                            <ReactSelect
                                value={formData.stage}
                                onValueChange={(val) => setFormData({ ...formData, stage: val })}
                                options={STAGE_OPTIONS}
                                triggerClassName="h-11 min-h-11 rounded-xl border-border/60 font-['Lexend'] text-[14px] bg-bg/10"
                                contentClassName="rounded-xl"
                            />
                        </div>

                        <div className="space-y-2">
                            <Label className="text-[11px] font-bold uppercase tracking-wider text-gray-500 font-['Lexend_Deca'] ml-1">
                                Team Assignment
                            </Label>
                            <ReactSelect
                                value={formData.team}
                                onValueChange={(val) => setFormData({ ...formData, team: val })}
                                options={teamOptions}
                                triggerClassName="h-11 min-h-11 rounded-xl border-border/60 font-['Lexend'] text-[14px] bg-bg/10"
                                contentClassName="rounded-xl"
                            />
                        </div>

                        <div className="space-y-2 col-span-2">
                            <Label className="text-[11px] font-bold uppercase tracking-wider text-gray-500 font-['Lexend_Deca'] ml-1 flex items-center gap-1.5">
                                Description / Notes
                            </Label>
                            <textarea
                                placeholder="Add some context about this lead..."
                                className="w-full min-h-[100px] rounded-xl border border-border/60 font-['Lexend'] text-[14px] p-4 shadow-sm focus:ring-accent/20 bg-bg/10 resize-none outline-none focus:border-accent/40"
                                value={formData.description}
                                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                            />
                        </div>
                    </div>

                    <DialogFooter className="pt-6 gap-3 flex-row sm:justify-end border-t border-border/40 -mx-8 px-8 bg-accent/5">
                        <Button
                            type="button"
                            variant="ghost"
                            onClick={onClose}
                            className="rounded-xl font-bold h-11 px-6 text-gray-500 hover:bg-white"
                        >
                            Cancel
                        </Button>
                        <Button
                            type="submit"
                            className="rounded-xl bg-accent px-10 font-extrabold text-white h-11 shadow-premium hover:shadow-lg hover:scale-[1.01] transition-all duration-200"
                        >
                            Create Lead
                        </Button>
                    </DialogFooter>
                </form>
            </DialogContent>
        </Dialog>
    )
}