"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 { Company, CompanySize } from "./types"
import { Building2, Globe, MapPin, Users, TrendingUp, Plus, Briefcase } from "lucide-react"

interface AddCompanyModalProps {
    isOpen: boolean
    onClose: () => void
    onCreate: (company: Partial<Company>) => void
    teams: any[] | undefined
}

const INDUSTRIES = ['MarTech', 'SaaS', 'E-Commerce', 'FMCG', 'Real Estate', 'Finance', 'Logistics', 'Media', 'EdTech', 'HealthTech']
const SIZES: CompanySize[] = ['Startup', 'SME', 'Enterprise']

const INDUSTRY_OPTIONS = INDUSTRIES.map((ind) => ({ value: ind, label: ind }))
const SIZE_OPTIONS = SIZES.map((s) => ({ value: s, label: s }))
const TEAM_OPTIONS = [
    { value: "all", label: "All Teams" },
    { value: "alpha", label: "Team Alpha" },
    { value: "beta", label: "Team Beta" },
    { value: "gamma", label: "Team Gamma" },
]

export function AddCompanyModal({
    isOpen,
    onClose,
    onCreate,
    teams
}: AddCompanyModalProps) {
    const [formData, setFormData] = React.useState({
        name: "",
        industry: INDUSTRIES[0],
        size: SIZES[0],
        city: "",
        website: "",
        team: "all",
        revenue: ""
    })

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault()
        if (formData.name) {
            onCreate({
                name: formData.name,
                industry: formData.industry,
                size: formData.size as CompanySize,
                city: formData.city,
                website: formData.website,
                team: formData.team as any,
                revenue: formData.revenue || "$0",
                deals: 0,
                totalVal: 0,
                initials: formData.name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase(),
                contacts: []
            })
            onClose()
            setFormData({
                name: "",
                industry: INDUSTRIES[0],
                size: SIZES[0],
                city: "",
                website: "",
                team: "all",
                revenue: ""
            })
        }
    }

    return (
        <Dialog open={isOpen} onOpenChange={onClose}>
            <DialogContent className="sm:max-w-[550px] 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 Company
                        </DialogTitle>
                        <DialogDescription className="text-[13px] font-['Lexend_Deca'] text-gray-500 mt-1 ml-13">
                            Register a new business account in your CRM database.
                        </DialogDescription>
                    </DialogHeader>
                </div>

                <form onSubmit={handleSubmit} className="p-8 pt-6 space-y-6">
                    <div className="grid grid-cols-2 gap-6">
                        <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">
                                <Building2 size={12} className="text-accent" /> Company Name
                            </Label>
                            <Input
                                placeholder="e.g. Nexus Solutions"
                                className="h-12 rounded-xl border-border/60 font-['Lexend'] text-[15px] px-4 shadow-sm focus:ring-accent/20 bg-bg/20"
                                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">
                                <Briefcase size={12} className="text-accent" /> Industry
                            </Label>
                            <ReactSelect
                                value={formData.industry}
                                onValueChange={(val) => setFormData({ ...formData, industry: val })}
                                options={INDUSTRY_OPTIONS}
                                triggerClassName="h-12 min-h-12 rounded-xl border-border/60 font-['Lexend'] text-[14px] bg-bg/20"
                                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">
                                <Users size={12} className="text-accent" /> Company Size
                            </Label>
                            <ReactSelect
                                value={formData.size}
                                onValueChange={(val) => setFormData({ ...formData, size: val as CompanySize })}
                                options={SIZE_OPTIONS}
                                triggerClassName="h-12 min-h-12 rounded-xl border-border/60 font-['Lexend'] text-[14px] bg-bg/20"
                                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">
                                <MapPin size={12} className="text-accent" /> City/Location
                            </Label>
                            <Input
                                placeholder="e.g. Karachi"
                                className="h-12 rounded-xl border-border/60 font-['Lexend'] text-[15px] px-4 shadow-sm focus:ring-accent/20 bg-bg/20"
                                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">
                                <Globe size={12} className="text-accent" /> Website
                            </Label>
                            <Input
                                placeholder="www.example.com"
                                className="h-12 rounded-xl border-border/60 font-['Lexend'] text-[15px] px-4 shadow-sm focus:ring-accent/20 bg-bg/20"
                                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">
                                <TrendingUp size={12} className="text-accent" /> Annual Revenue
                            </Label>
                            <Input
                                placeholder="e.g. $25M"
                                className="h-12 rounded-xl border-border/60 font-['Lexend'] text-[15px] px-4 shadow-sm focus:ring-accent/20 bg-bg/20"
                                value={formData.revenue}
                                onChange={(e) => setFormData({ ...formData, revenue: 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">
                                Default Team
                            </Label>
                            <ReactSelect
                                value={formData.team}
                                onValueChange={(val) => setFormData({ ...formData, team: val })}
                                options={TEAM_OPTIONS}
                                triggerClassName="h-12 min-h-12 rounded-xl border-border/60 font-['Lexend'] text-[14px] bg-bg/20"
                                contentClassName="rounded-xl"
                            />
                        </div>
                    </div>

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