"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Loader2, Eye, EyeOff, ArrowLeft, Building2 } from "lucide-react"
import { adminCompaniesApi } from "@/lib/api"
import { toast } from "sonner"
import { useTranslation } from "@/lib/i18n"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import Link from "next/link"

const formatCNPJ = (value: string) => {
    return value
        .replace(/\D/g, "")
        .replace(/^(\d{2})(\d)/, "$1.$2")
        .replace(/^(\d{2})\.(\d{3})(\d)/, "$1.$2.$3")
        .replace(/\.(\d{3})(\d)/, ".$1/$2")
        .replace(/(\d{4})(\d)/, "$1-$2")
        .substring(0, 18)
}

const formatPhone = (value: string) => {
    return value
        .replace(/\D/g, "")
        .replace(/^(\d{2})(\d)/, "($1) $2")
        .replace(/(\d{5})(\d)/, "$1-$2")
        .substring(0, 15)
}

export default function NewCompanyPage() {
    const { t } = useTranslation()
    const router = useRouter()
    const [creating, setCreating] = useState(false)
    const [showPassword, setShowPassword] = useState(false)
    const [showConfirmPassword, setShowConfirmPassword] = useState(false)
    const [formData, setFormData] = useState({
        name: "",
        slug: "",
        email: "",
        password: "",
        confirmPassword: "",
        document: "",
        phone: "",
        website: "",
        address: "",
        description: "",
        logoUrl: "",
        yearsInMarket: "",
    })

    const generateSlug = (name: string) => {
        return name
            .toLowerCase()
            .normalize("NFD")
            .replace(/[\u0300-\u036f]/g, "")
            .replace(/[^a-z0-9]+/g, "-")
            .replace(/(^-|-$)/g, "")
    }

    const handleCreate = async () => {
        try {
            setCreating(true)
            const payload = {
                ...formData,
                document: formData.document.replace(/\D/g, ''),
                phone: formData.phone.replace(/\D/g, ''),
            }
            await adminCompaniesApi.create(payload)
            toast.success(t('admin.companies.success.created'))
            router.push("/dashboard/companies")
        } catch (error: any) {
            console.error("Error creating company:", error)
            if (error.message?.includes("already exists")) {
                toast.error(t('admin.companies.error.emailExists', { defaultValue: "User with this email already exists" }))
            } else {
                toast.error("Failed to create company")
            }
        } finally {
            setCreating(false)
        }
    }

    return (
        <div className="container max-w-4xl py-10">
            <div className="mb-8">
                <Button variant="ghost" size="sm" asChild className="mb-4">
                    <Link href="/dashboard/companies" className="flex items-center gap-2">
                        <ArrowLeft className="h-4 w-4" />
                        {t('admin.companies.create.backToList', { defaultValue: 'Voltar para lista' })}
                    </Link>
                </Button>
            </div>

            <Card className="border-0 shadow-lg">
                <CardHeader className="bg-muted/50 pb-8 pt-8">
                    <div className="flex items-center gap-4">
                        <div className="bg-primary/10 p-3 rounded-xl">
                            <Building2 className="h-8 w-8 text-primary" />
                        </div>
                        <div>
                            <CardTitle className="text-2xl font-bold">{t('admin.companies.create.title')}</CardTitle>
                            <CardDescription className="text-base mt-1">
                                {t('admin.companies.create.subtitle')}
                            </CardDescription>
                        </div>
                    </div>
                </CardHeader>
                <CardContent className="pt-8">
                    <div className="grid gap-8">
                        {/* Seção: Informações Básicas */}
                        <div className="grid gap-4">
                            <h3 className="text-lg font-semibold border-b pb-2 flex items-center gap-2">
                                <span className="bg-primary w-1 h-5 rounded-full"></span>
                                {t('admin.companies.sections.basicInfo', { defaultValue: 'Informações Básicas' })}
                            </h3>
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div className="grid gap-2">
                                    <Label htmlFor="name">{t('admin.companies.create.name')}</Label>
                                    <Input
                                        id="name"
                                        value={formData.name}
                                        onChange={(e) =>
                                            setFormData({
                                                ...formData,
                                                name: e.target.value,
                                                slug: generateSlug(e.target.value),
                                            })
                                        }
                                        placeholder={t('admin.companies.create.namePlaceholder')}
                                    />
                                </div>
                                <div className="grid gap-2">
                                    <Label htmlFor="slug">{t('admin.companies.create.slug')}</Label>
                                    <Input
                                        id="slug"
                                        value={formData.slug}
                                        onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
                                        placeholder={t('admin.companies.create.slugPlaceholder')}
                                    />
                                </div>
                            </div>
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div className="grid gap-2">
                                    <Label htmlFor="document">{t('admin.companies.fields.document')}</Label>
                                    <Input
                                        id="document"
                                        maxLength={18}
                                        value={formData.document}
                                        onChange={(e) => setFormData({ ...formData, document: formatCNPJ(e.target.value) })}
                                        placeholder="CNPJ / Document"
                                    />
                                </div>
                                <div className="grid gap-2">
                                    <Label htmlFor="email">{t('admin.companies.create.email')}</Label>
                                    <Input
                                        id="email"
                                        type="email"
                                        value={formData.email}
                                        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                                        placeholder={t('admin.companies.create.emailPlaceholder')}
                                    />
                                </div>
                            </div>
                        </div>

                        {/* Seção: Segurança */}
                        <div className="grid gap-4">
                            <h3 className="text-lg font-semibold border-b pb-2 flex items-center gap-2">
                                <span className="bg-primary w-1 h-5 rounded-full"></span>
                                {t('admin.companies.sections.security', { defaultValue: 'Segurança' })}
                            </h3>
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div className="grid gap-2">
                                    <Label htmlFor="password">{t('admin.companies.fields.password')}</Label>
                                    <div className="relative">
                                        <Input
                                            id="password"
                                            type={showPassword ? "text" : "password"}
                                            value={formData.password}
                                            onChange={(e) => setFormData({ ...formData, password: e.target.value })}
                                            placeholder="******"
                                        />
                                        <Button
                                            type="button"
                                            variant="ghost"
                                            size="sm"
                                            className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                                            onClick={() => setShowPassword(!showPassword)}
                                        >
                                            {showPassword ? (
                                                <EyeOff className="h-4 w-4 text-muted-foreground" />
                                            ) : (
                                                <Eye className="h-4 w-4 text-muted-foreground" />
                                            )}
                                        </Button>
                                    </div>
                                </div>
                                <div className="grid gap-2">
                                    <Label htmlFor="confirmPassword">{t('admin.companies.fields.confirmPassword')}</Label>
                                    <div className="relative">
                                        <Input
                                            id="confirmPassword"
                                            type={showConfirmPassword ? "text" : "password"}
                                            value={formData.confirmPassword}
                                            onChange={(e) => setFormData({ ...formData, confirmPassword: e.target.value })}
                                            placeholder="******"
                                        />
                                        <Button
                                            type="button"
                                            variant="ghost"
                                            size="sm"
                                            className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                                            onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                                        >
                                            {showConfirmPassword ? (
                                                <EyeOff className="h-4 w-4 text-muted-foreground" />
                                            ) : (
                                                <Eye className="h-4 w-4 text-muted-foreground" />
                                            )}
                                        </Button>
                                    </div>
                                    {formData.password !== formData.confirmPassword && formData.confirmPassword && (
                                        <p className="text-xs text-red-500">{t('admin.companies.fields.passwordsDoNotMatch')}</p>
                                    )}
                                </div>
                            </div>
                        </div>

                        {/* Seção: Contato e Localização */}
                        <div className="grid gap-4">
                            <h3 className="text-lg font-semibold border-b pb-2 flex items-center gap-2">
                                <span className="bg-primary w-1 h-5 rounded-full"></span>
                                {t('admin.companies.sections.contact', { defaultValue: 'Contato e Localização' })}
                            </h3>
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div className="grid gap-2">
                                    <Label htmlFor="phone">{t('admin.companies.fields.phone')}</Label>
                                    <Input
                                        id="phone"
                                        maxLength={15}
                                        value={formData.phone}
                                        onChange={(e) => setFormData({ ...formData, phone: formatPhone(e.target.value) })}
                                        placeholder="(99) 99999-9999"
                                    />
                                </div>
                                <div className="grid gap-2">
                                    <Label htmlFor="website">{t('admin.companies.fields.website')}</Label>
                                    <Input
                                        id="website"
                                        value={formData.website}
                                        onChange={(e) => setFormData({ ...formData, website: e.target.value })}
                                        placeholder="https://example.com"
                                    />
                                </div>
                            </div>
                            <div className="grid gap-2">
                                <Label htmlFor="address">{t('admin.companies.fields.address')}</Label>
                                <Input
                                    id="address"
                                    value={formData.address}
                                    onChange={(e) => setFormData({ ...formData, address: e.target.value })}
                                    placeholder="Endereço completo"
                                />
                            </div>
                        </div>

                        {/* Seção: Detalhes da Empresa */}
                        <div className="grid gap-4">
                            <h3 className="text-lg font-semibold border-b pb-2 flex items-center gap-2">
                                <span className="bg-primary w-1 h-5 rounded-full"></span>
                                {t('admin.companies.sections.details', { defaultValue: 'Detalhes Adicionais' })}
                            </h3>
                            <div className="grid gap-2">
                                <Label htmlFor="description">{t('admin.companies.fields.description')}</Label>
                                <Textarea
                                    id="description"
                                    value={formData.description}
                                    onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                                    placeholder="Conte um pouco sobre a empresa..."
                                    className="min-h-[120px] resize-none"
                                />
                            </div>
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div className="grid gap-2">
                                    <Label htmlFor="logoUrl">Logo URL</Label>
                                    <Input
                                        id="logoUrl"
                                        value={formData.logoUrl}
                                        onChange={(e) => setFormData({ ...formData, logoUrl: e.target.value })}
                                        placeholder="https://example.com/logo.png"
                                    />
                                </div>
                                <div className="grid gap-2">
                                    <Label htmlFor="yearsInMarket">Anos no mercado</Label>
                                    <Input
                                        id="yearsInMarket"
                                        type="number"
                                        value={formData.yearsInMarket}
                                        onChange={(e) => setFormData({ ...formData, yearsInMarket: e.target.value })}
                                        placeholder="Ex: 10"
                                    />
                                </div>
                            </div>
                        </div>

                        <div className="flex justify-end gap-4 pt-6 mt-4 border-t">
                            <Button variant="outline" asChild>
                                <Link href="/dashboard/companies">
                                    {t('admin.companies.create.cancel')}
                                </Link>
                            </Button>
                            <Button onClick={handleCreate} disabled={creating} className="min-w-[140px]">
                                {creating ? (
                                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                                ) : (
                                    <Building2 className="h-4 w-4 mr-2" />
                                )}
                                {t('admin.companies.create.submit')}
                            </Button>
                        </div>
                    </div>
                </CardContent>
            </Card>
        </div>
    )
}