import FormField from '@/components/form/FormField';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
import { 
    Shield, 
    Server, 
    ArrowRightLeft,
    CheckCircle2,
    AlertCircle,
    Clock
} from 'lucide-react';

export interface DomainData {
    id?: number;
    domain: string;
    is_primary: boolean;
    is_custom: boolean;
    status: number;
    ssl_config?: {
        ssl_enabled: boolean;
        ssl_expires_at?: string;
        ssl_provider?: string;
        ssl_certificate?: string;
        ssl_private_key?: string;
        ssl_chain?: string;
    };
    dns_records?: {
        dns_status?: 'verified' | 'pending' | 'failed';
        dns_verified_at?: string;
        nameserver_1?: string;
        nameserver_2?: string;
    };
    redirect_settings?: {
        redirect_to?: string;
        force_https: boolean;
        redirect_type?: number;
        redirect_enabled: boolean;
    };
}

export default function DomainManagementSection() {
    const getDnsStatusIcon = (status?: string) => {
        switch (status) {
            case 'verified':
                return <CheckCircle2 className="h-4 w-4 text-green-600" />;
            case 'failed':
                return <AlertCircle className="h-4 w-4 text-red-600" />;
            case 'pending':
            default:
                return <Clock className="h-4 w-4 text-yellow-600" />;
        }
    };

    const index = 0; // Single domain only

    return (
        <div className="space-y-6">
            {/* Basic Domain Information */}
            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                <FormField
                    name="domains.0.domain"
                    type="text"
                    label="Domain Name"
                    placeholder="example.com or subdomain.yourdomain.com"
                />
                <FormField
                    name="domains.0.status"
                    type="select"
                    label="Status"
                    options={[
                        { value: '0', label: 'Inactive' },
                        { value: '1', label: 'Active' },
                    ]}
                />
            </div>

            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                <FormField
                    name="domains.0.is_primary"
                    type="checkbox"
                    label="Primary Domain"
                />
                <FormField
                    name="domains.0.is_custom"
                    type="checkbox"
                    label="Custom Domain"
                />
            </div>

            {/* Accordion for Advanced Settings */}
            <Accordion type="single" collapsible className="w-full">
                {/* SSL Configuration */}
                <AccordionItem value="ssl" className="border rounded-lg mb-2">
                    <AccordionTrigger className="px-4 py-3 hover:no-underline">
                        <div className="flex items-center gap-3">
                            <Shield className="h-5 w-5 text-green-600" />
                            <span className="font-semibold">SSL Configuration</span>
                        </div>
                    </AccordionTrigger>
                    <AccordionContent className="px-4 pb-4">
                        <div className="space-y-4 pt-2">
                            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                                <FormField
                                    name="domains.0.ssl_config.ssl_enabled"
                                    type="checkbox"
                                    label="SSL Enabled"
                                />
                                <FormField
                                    name="domains.0.ssl_config.ssl_provider"
                                    type="select"
                                    label="SSL Provider"
                                    placeholder="Select Provider"
                                    options={[
                                        { value: 'lets_encrypt', label: "Let's Encrypt" },
                                        { value: 'cloudflare', label: 'Cloudflare' },
                                        { value: 'custom', label: 'Custom' },
                                    ]}
                                />
                            </div>
                            <FormField
                                name="domains.0.ssl_config.ssl_expires_at"
                                type="date"
                                label="SSL Expiration Date"
                            />
                            <FormField
                                name="domains.0.ssl_config.ssl_certificate"
                                type="textarea"
                                label="SSL Certificate"
                                placeholder="-----BEGIN CERTIFICATE-----"
                                rows={3}
                            />
                            <FormField
                                name="domains.0.ssl_config.ssl_private_key"
                                type="textarea"
                                label="SSL Private Key"
                                placeholder="-----BEGIN PRIVATE KEY-----"
                                rows={3}
                            />
                            <FormField
                                name="domains.0.ssl_config.ssl_chain"
                                type="textarea"
                                label="SSL Certificate Chain"
                                placeholder="-----BEGIN CERTIFICATE-----"
                                rows={3}
                            />
                        </div>
                    </AccordionContent>
                </AccordionItem>

                {/* DNS Records */}
                <AccordionItem value="dns" className="border rounded-lg mb-2">
                    <AccordionTrigger className="px-4 py-3 hover:no-underline">
                        <div className="flex items-center gap-3">
                            <Server className="h-5 w-5 text-blue-600" />
                            <span className="font-semibold">DNS Configuration</span>
                        </div>
                    </AccordionTrigger>
                    <AccordionContent className="px-4 pb-4">
                        <div className="space-y-4 pt-2">
                            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                                <FormField
                                    name="domains.0.dns_records.dns_status"
                                    type="select"
                                    label="DNS Status"
                                    options={[
                                        { value: 'pending', label: 'Pending' },
                                        { value: 'verified', label: 'Verified' },
                                        { value: 'failed', label: 'Failed' },
                                    ]}
                                />
                                <FormField
                                    name="domains.0.dns_records.dns_verified_at"
                                    type="date"
                                    label="DNS Verified Date"
                                />
                            </div>
                            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                                <FormField
                                    name="domains.0.dns_records.nameserver_1"
                                    type="text"
                                    label="Nameserver 1"
                                    placeholder="ns1.example.com"
                                />
                                <FormField
                                    name="domains.0.dns_records.nameserver_2"
                                    type="text"
                                    label="Nameserver 2"
                                    placeholder="ns2.example.com"
                                />
                            </div>
                        </div>
                    </AccordionContent>
                </AccordionItem>

                {/* Redirect Settings */}
                <AccordionItem value="redirect" className="border rounded-lg">
                    <AccordionTrigger className="px-4 py-3 hover:no-underline">
                        <div className="flex items-center gap-3">
                            <ArrowRightLeft className="h-5 w-5 text-purple-600" />
                            <span className="font-semibold">Redirect Settings</span>
                        </div>
                    </AccordionTrigger>
                    <AccordionContent className="px-4 pb-4">
                        <div className="space-y-4 pt-2">
                            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                                <FormField
                                    name="domains.0.redirect_settings.redirect_enabled"
                                    type="checkbox"
                                    label="Enable Redirect"
                                />
                                <FormField
                                    name="domains.0.redirect_settings.force_https"
                                    type="checkbox"
                                    label="Force HTTPS"
                                />
                            </div>
                            <FormField
                                name="domains.0.redirect_settings.redirect_to"
                                type="text"
                                label="Redirect To"
                                placeholder="https://example.com"
                            />
                            <FormField
                                name="domains.0.redirect_settings.redirect_type"
                                type="select"
                                label="Redirect Type"
                                options={[
                                    { value: '301', label: '301 - Permanent' },
                                    { value: '302', label: '302 - Temporary' },
                                    { value: '307', label: '307 - Temporary (Preserve Method)' },
                                    { value: '308', label: '308 - Permanent (Preserve Method)' },
                                ]}
                            />
                        </div>
                    </AccordionContent>
                </AccordionItem>
            </Accordion>
        </div>
    );
}