import { useState, useRef, useEffect, useMemo } from 'react';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Switch } from '@/components/ui/switch';
import { Label } from '@/components/ui/label';
import { Trash2, CheckCircle, AlertCircle, Loader2, Plus, Undo2, Save, RotateCw, Pencil } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useIsMobile } from '@/hooks/use-mobile';
import { DomainTopology } from './DomainTopology';
import { domainsApi, type RegisteredDomain } from '@/services/api/networking';
import type { CertEntry } from '@/services/api/cert';
import type { DdnsRecordStatus } from '@/services/api/networking';

interface DomainCardProps {
  domain: RegisteredDomain;
  cert: CertEntry | undefined;
  ddnsRecord: DdnsRecordStatus | undefined;
  vpnPeerCount: number;
  vpnRunning: boolean;
  vpnConfigured: boolean;
  daemons: {
    haproxy?: boolean;
    nftables?: boolean;
    crowdsec?: boolean;
    wireguard?: boolean;
  };
  certDomains: Set<string>;
  onProvisionCert: (domain: string) => void;
  onRenewCert: () => void;
  isProvisioningCert: boolean;
  isRenewingCert: boolean;
}

type GatewayMode = 'dns-only' | 'l4' | 'l7';

/** Editable fields tracked as local draft state */
interface DomainDraft {
  public: boolean;
  mode: GatewayMode;
  subdomains: boolean;
  backendAddress: string;
}

function getGatewayMode(d: RegisteredDomain): GatewayMode {
  const bt = d.routes?.length ? d.routes[0].backend.type : d.backend.type;
  if (bt === 'dns-only') return 'dns-only';
  if (bt === 'tcp-passthrough') return 'l4';
  return 'l7';
}

function draftFromDomain(d: RegisteredDomain): DomainDraft {
  return {
    public: d.public,
    mode: getGatewayMode(d),
    subdomains: d.subdomains,
    backendAddress: d.backend.address,
  };
}

function getModeLabel(mode: GatewayMode): string {
  switch (mode) {
    case 'dns-only': return 'Direct';
    case 'l4': return 'L4 Passthrough';
    case 'l7': return 'L7 Proxy';
  }
}

function getTlsStatus(d: RegisteredDomain, certDomains: Set<string>): 'ok' | 'error' | 'na' {
  const bt = d.routes?.length ? d.routes[0].backend.type : d.backend.type;
  if (d.tls === 'passthrough' || d.tls === 'none' || bt === 'tcp-passthrough' || bt === 'dns-only') return 'na';
  if (certDomains.has(d.domain)) return 'ok';
  const dotIdx = d.domain.indexOf('.');
  if (dotIdx > 0 && certDomains.has(d.domain.slice(dotIdx + 1))) return 'ok';
  return 'error';
}

function getIssues(d: RegisteredDomain, certDomains: Set<string>, ddnsRecord: DdnsRecordStatus | undefined): string[] {
  const issues: string[] = [];
  const tls = getTlsStatus(d, certDomains);
  if (tls === 'error') issues.push('No TLS cert');
  if (d.public && ddnsRecord && !ddnsRecord.ok) issues.push('DDNS failed');
  return issues;
}

/** Build a virtual RegisteredDomain from the draft for the topology diagram */
function applyDraftToDomain(domain: RegisteredDomain, draft: DomainDraft): RegisteredDomain {
  const backendType = draft.mode === 'dns-only' ? 'dns-only' : draft.mode === 'l4' ? 'tcp-passthrough' : 'http';
  const tls = draft.mode === 'dns-only' ? 'none' : draft.mode === 'l4' ? 'passthrough' : 'terminate';
  return {
    ...domain,
    public: draft.public,
    subdomains: draft.subdomains,
    backend: { ...domain.backend, address: draft.backendAddress, type: backendType },
    tls,
  };
}

/** Compute human-readable list of changes */
function describeChanges(server: DomainDraft, draft: DomainDraft): string[] {
  const changes: string[] = [];
  if (draft.public !== server.public) changes.push(draft.public ? 'Make public' : 'Make private');
  if (draft.mode !== server.mode) changes.push(`Mode: ${getModeLabel(server.mode)} → ${getModeLabel(draft.mode)}`);
  if (draft.subdomains !== server.subdomains) changes.push(draft.subdomains ? 'Enable subdomains' : 'Disable subdomains');
  if (draft.backendAddress !== server.backendAddress) changes.push(`Backend: ${server.backendAddress} → ${draft.backendAddress}`);
  return changes;
}

/** Compact controls for mobile — vertical pipeline: Source → Routing → Destination */
function MobileControls({
  draft, onUpdateDraft, domain, cert, ddnsRecord,
  onProvisionCert, onRenewCert, isProvisioningCert, isRenewingCert,
}: {
  draft: DomainDraft;
  onUpdateDraft: (patch: Partial<DomainDraft>) => void;
  domain: RegisteredDomain;
  cert: CertEntry | undefined;
  ddnsRecord: DdnsRecordStatus | undefined;
  onProvisionCert: (d: string) => void;
  onRenewCert: () => void;
  isProvisioningCert: boolean;
  isRenewingCert: boolean;
}) {
  const isL7 = draft.mode === 'l7';
  const isDnsOnly = draft.mode === 'dns-only';
  const hasCert = !!cert?.cert.exists;
  const daysLeft = cert?.cert.daysLeft ?? 0;
  const hasRoutes = !!domain.routes?.length;

  const [editingBackend, setEditingBackend] = useState(false);
  const backendInputRef = useRef<HTMLInputElement>(null);

  const handleBackendSave = () => {
    const val = backendInputRef.current?.value.trim();
    if (val) onUpdateDraft({ backendAddress: val });
    setEditingBackend(false);
  };

  return (
    <div className="py-2 space-y-3">
      {/* === Section 1: Source === */}
      <div className="space-y-2">
        <div className="text-[10px] text-muted-foreground font-medium uppercase tracking-wider">Source</div>
        <div className="flex items-center justify-between">
          <Label className="text-xs">Internet-accessible</Label>
          <Switch checked={draft.public} onCheckedChange={v => onUpdateDraft({ public: v })} />
        </div>
        {draft.public && ddnsRecord && !ddnsRecord.ok && (
          <div className="flex items-center gap-2 text-[10px] text-red-600 dark:text-red-400 bg-red-50/50 dark:bg-red-950/20 rounded-md px-3 py-1.5">
            <AlertCircle className="h-3 w-3 shrink-0" />
            DDNS sync failed{ddnsRecord.error ? `: ${ddnsRecord.error}` : ''}
          </div>
        )}
        <div className="flex items-center justify-between">
          <Label className="text-xs">Include subdomains</Label>
          <Switch checked={draft.subdomains} onCheckedChange={v => onUpdateDraft({ subdomains: v })} />
        </div>
      </div>

      {/* === Section 2: Routing === */}
      <div className="border-t border-border/50 pt-3 space-y-2">
        <div className="text-[10px] text-muted-foreground font-medium uppercase tracking-wider">Routing</div>
        <div className="flex gap-1 bg-muted rounded-md p-1">
          {([
            { value: 'dns-only' as const, label: 'Direct' },
            { value: 'l4' as const, label: 'L4 Passthrough' },
            { value: 'l7' as const, label: 'L7 Proxy' },
          ]).map(opt => (
            <button key={opt.value} type="button"
              className={cn(
                'flex-1 text-xs py-1.5 px-2 rounded transition-colors',
                draft.mode === opt.value ? 'bg-background shadow-sm font-medium' : 'text-muted-foreground hover:text-foreground',
              )}
              onClick={() => onUpdateDraft({ mode: opt.value })}
            >
              {opt.label}
            </button>
          ))}
        </div>
        {isDnsOnly && (
          <div className="flex items-center gap-2 text-[10px] text-amber-600 dark:text-amber-400 bg-amber-50/50 dark:bg-amber-950/20 rounded-md px-3 py-1.5">
            <AlertCircle className="h-3 w-3 shrink-0" />
            No firewall, proxy, or TLS protection — traffic goes directly to your server
          </div>
        )}
        {isL7 && (
          <>
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2 text-xs">
                {hasCert ? (
                  <>
                    <CheckCircle className="h-3.5 w-3.5 text-green-500" />
                    <span>TLS: {(cert!.cert.wildcard || cert!.coveredBy) ? `*.${cert!.domain}` : cert!.domain}</span>
                    {cert!.cert.daysLeft != null && <span className="text-muted-foreground">({cert!.cert.daysLeft}d)</span>}
                  </>
                ) : (
                  <>
                    <AlertCircle className="h-3.5 w-3.5 text-red-500" />
                    <span>No TLS certificate</span>
                  </>
                )}
              </div>
              {!hasCert && (
                <Button variant="outline" size="sm" className="h-7 text-xs gap-1"
                  disabled={isProvisioningCert}
                  onClick={() => onProvisionCert(draft.subdomains ? `*.` : '')}
                >
                  {isProvisioningCert ? <Loader2 className="h-3 w-3 animate-spin" /> : <Plus className="h-3 w-3" />}
                  Provision
                </Button>
              )}
              {hasCert && daysLeft < 30 && (
                <Button variant="outline" size="sm" className="h-7 text-xs gap-1"
                  disabled={isRenewingCert}
                  onClick={() => onRenewCert()}
                >
                  {isRenewingCert ? <Loader2 className="h-3 w-3 animate-spin" /> : <RotateCw className="h-3 w-3" />}
                  Renew
                </Button>
              )}
            </div>
            {!hasCert && (
              <div className="flex items-center gap-2 text-[10px] text-red-600 dark:text-red-400 bg-red-50/50 dark:bg-red-950/20 rounded-md px-3 py-1.5">
                <AlertCircle className="h-3 w-3 shrink-0" />
                L7 routing is inactive until a TLS certificate is provisioned
              </div>
            )}
          </>
        )}
      </div>

      {/* === Section 3: Destination === */}
      <div className="border-t border-border/50 pt-3 space-y-2">
        <div className="text-[10px] text-muted-foreground font-medium uppercase tracking-wider">Destination</div>
        {editingBackend ? (
          <div className="space-y-1.5">
            <input
              ref={backendInputRef}
              defaultValue={draft.backendAddress}
              className="font-mono bg-muted rounded px-2 py-1.5 text-xs w-full border border-border focus:outline-none focus:ring-1 focus:ring-ring"
              autoFocus
              onKeyDown={e => {
                if (e.key === 'Enter') handleBackendSave();
                if (e.key === 'Escape') setEditingBackend(false);
              }}
            />
            <div className="flex gap-1">
              <Button variant="outline" size="sm" className="h-7 text-xs flex-1" onClick={handleBackendSave}>Save</Button>
              <Button variant="ghost" size="sm" className="h-7 text-xs flex-1" onClick={() => setEditingBackend(false)}>Cancel</Button>
            </div>
          </div>
        ) : (
          <div className="flex items-center justify-between">
            <span className="font-mono text-xs bg-muted rounded px-2 py-1">
              {hasRoutes ? `${domain.routes!.length} backends` : draft.backendAddress}
            </span>
            {!hasRoutes && (
              <Button variant="ghost" size="sm" className="h-7 w-7 p-0"
                onClick={() => setEditingBackend(true)}
              >
                <Pencil className="h-3 w-3" />
              </Button>
            )}
          </div>
        )}
        {isL7 && domain.routes && domain.routes.length > 0 && (
          <div className="bg-muted/30 rounded-md p-2 space-y-1">
            <div className="text-[10px] text-muted-foreground font-medium mb-1">Route table</div>
            {domain.routes.map((route, i) => (
              <div key={i} className="flex items-center gap-2 text-[10px] flex-wrap">
                <span className="font-mono text-muted-foreground truncate">
                  {route.paths?.length ? route.paths.join(', ') : '/*'}
                </span>
                <span className="text-muted-foreground">{'->'}</span>
                <span className="font-mono">{route.backend.address}</span>
                {route.ipAllow && route.ipAllow.length > 0 && (
                  <span className="text-muted-foreground flex items-center gap-0.5">
                    {route.ipAllow.length} IP rules
                  </span>
                )}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

export function DomainCard({
  domain,
  cert,
  ddnsRecord,
  vpnPeerCount,
  vpnRunning,
  vpnConfigured,
  daemons,
  certDomains,
  onProvisionCert,
  onRenewCert,
  isProvisioningCert,
  isRenewingCert,
}: DomainCardProps) {
  const queryClient = useQueryClient();
  const isMobile = useIsMobile();
  const [isExpanded, setIsExpanded] = useState(() => {
    try {
      const stored = localStorage.getItem('domains:expanded');
      return stored ? JSON.parse(stored).includes(domain.domain) : false;
    } catch { return false; }
  });

  useEffect(() => {
    try {
      const stored = localStorage.getItem('domains:expanded');
      const set: string[] = stored ? JSON.parse(stored) : [];
      const next = isExpanded
        ? [...new Set([...set, domain.domain])]
        : set.filter(d => d !== domain.domain);
      localStorage.setItem('domains:expanded', JSON.stringify(next));
    } catch { /* ignore */ }
  }, [isExpanded, domain.domain]);

  const isManaged = domain.source !== 'manual';
  const serverState = useMemo(() => draftFromDomain(domain), [domain]);
  const prevServerState = useRef(serverState);
  const [draft, setDraft] = useState<DomainDraft>(() => {
    try {
      const stored = localStorage.getItem('domains:drafts');
      if (stored) {
        const drafts = JSON.parse(stored);
        if (drafts[domain.domain]) return drafts[domain.domain];
      }
    } catch { /* ignore */ }
    return serverState;
  });

  // Reset draft only when server state actually changes (apply, external update)
  useEffect(() => {
    const prev = prevServerState.current;
    if (prev.public !== serverState.public
      || prev.mode !== serverState.mode
      || prev.subdomains !== serverState.subdomains
      || prev.backendAddress !== serverState.backendAddress) {
      setDraft(serverState);
      prevServerState.current = serverState;
    }
  }, [serverState]);

  const isDirty = draft.public !== serverState.public
    || draft.mode !== serverState.mode
    || draft.subdomains !== serverState.subdomains
    || draft.backendAddress !== serverState.backendAddress;

  // Persist dirty drafts, clear when clean
  useEffect(() => {
    try {
      const stored = localStorage.getItem('domains:drafts');
      const drafts = stored ? JSON.parse(stored) : {};
      if (isDirty) {
        drafts[domain.domain] = draft;
      } else {
        delete drafts[domain.domain];
      }
      if (Object.keys(drafts).length > 0) {
        localStorage.setItem('domains:drafts', JSON.stringify(drafts));
      } else {
        localStorage.removeItem('domains:drafts');
      }
    } catch { /* ignore */ }
  }, [draft, isDirty, domain.domain]);

  const changes = isDirty ? describeChanges(serverState, draft) : [];

  // The "virtual" domain reflects the draft state for the topology diagram
  const previewDomain = isDirty ? applyDraftToDomain(domain, draft) : domain;
  const previewMode = draft.mode;
  const issues = getIssues(previewDomain, certDomains, ddnsRecord);

  const updateDraft = (patch: Partial<DomainDraft>) => {
    setDraft(prev => ({ ...prev, ...patch }));
  };

  // Apply sends the accumulated draft changes to the server
  const applyMutation = useMutation({
    mutationFn: () => {
      const backendType = draft.mode === 'dns-only' ? 'dns-only' : draft.mode === 'l4' ? 'tcp-passthrough' : 'http';
      const tls = draft.mode === 'dns-only' ? 'none' : draft.mode === 'l4' ? 'passthrough' : 'terminate';
      return domainsApi.register({
        ...domain,
        public: draft.public,
        subdomains: draft.subdomains,
        backend: { ...domain.backend, address: draft.backendAddress, type: backendType },
        tls,
      } as Parameters<typeof domainsApi.register>[0]);
    },
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['domains'] }),
  });

  const deregisterMutation = useMutation({
    mutationFn: () => domainsApi.deregister(domain.domain),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['domains'] }),
  });

  const handleDiscard = () => setDraft(serverState);

  const domainDisplay = draft.subdomains ? `*.${domain.domain}` : domain.domain;

  return (
    <Card className={cn('overflow-hidden', isDirty && 'ring-1 ring-amber-400/50')}>
      {/* === Collapsed Header === */}
      <button
        type="button"
        onClick={() => setIsExpanded(!isExpanded)}
        className="w-full px-4 py-3 text-left hover:bg-muted/30 transition-colors"
      >
        <div className="flex items-center justify-between gap-3">
          <div className="flex items-center gap-2 min-w-0">
            <span className="font-mono text-sm font-medium truncate">{domainDisplay}</span>
            {isDirty && <Badge variant="outline" className="text-[9px] px-1 py-0 h-4 border-amber-400 text-amber-600 dark:text-amber-400">unsaved</Badge>}
          </div>

          <div className="flex items-center gap-2 shrink-0">
            <Badge variant="outline" className="text-[10px] px-1.5 py-0 h-5">
              {getModeLabel(previewMode)}
            </Badge>

            <Badge
              variant={draft.public ? 'default' : 'secondary'}
              className="text-[10px] px-1.5 py-0 h-5"
            >
              {draft.public ? 'Public' : 'Private'}
            </Badge>

            {!domain.routes?.length && (
              <span className="text-xs text-muted-foreground font-mono hidden sm:inline">
                {'-> '}{draft.backendAddress}
              </span>
            )}

            {issues.length === 0 ? (
              <CheckCircle className="h-3.5 w-3.5 text-green-500 shrink-0" />
            ) : (
              <span className="flex items-center gap-1 text-[10px] text-amber-600 dark:text-amber-400">
                <AlertCircle className="h-3.5 w-3.5 shrink-0" />
                <span className="hidden sm:inline">{issues[0]}</span>
              </span>
            )}
          </div>
        </div>
      </button>

      {/* === Expanded Content === */}
      {isExpanded && (
        <CardContent className="pt-0 pb-4 px-4 space-y-3">
          {/* Managed domain notice */}
          {isManaged && (
            <div className="text-[10px] text-muted-foreground bg-muted/30 rounded-md px-3 py-1.5">
              Registered by <span className="font-medium">{domain.source}</span> — changes may be overwritten on next sync
            </div>
          )}

          {/* Topology diagram (desktop) / compact controls (mobile) */}
          {isMobile ? (
            <MobileControls
              draft={draft}
              onUpdateDraft={updateDraft}
              domain={domain}
              cert={cert}
              ddnsRecord={ddnsRecord}
              onProvisionCert={d => onProvisionCert(draft.subdomains ? `*.${domain.domain}` : d || domain.domain)}
              onRenewCert={onRenewCert}
              isProvisioningCert={isProvisioningCert}
              isRenewingCert={isRenewingCert}
            />
          ) : (
            <DomainTopology
              domain={previewDomain}
              cert={cert}
              ddnsRecord={ddnsRecord ? { ok: ddnsRecord.ok, ip: ddnsRecord.ip, error: ddnsRecord.error } : undefined}
              vpnPeerCount={vpnPeerCount}
              vpnRunning={vpnRunning}
              vpnConfigured={vpnConfigured}
              daemons={daemons}
              isManaged={isManaged}
              onTogglePublic={() => updateDraft({ public: !draft.public })}
              onChangeMode={m => updateDraft({ mode: m })}
              onChangeBackend={addr => updateDraft({ backendAddress: addr })}
              onProvisionCert={onProvisionCert}
              onRenewCert={onRenewCert}
              isProvisioningCert={isProvisioningCert}
              isRenewingCert={isRenewingCert}
              isMutating={applyMutation.isPending}
            />
          )}

          {/* === Apply bar (visible when dirty) === */}
          {isDirty && (
            <div className="flex items-center justify-between gap-3 bg-amber-50 dark:bg-amber-950/20 border border-amber-200 dark:border-amber-800/50 rounded-md px-3 py-2">
              <div className="text-xs space-y-0.5">
                <div className="font-medium text-amber-800 dark:text-amber-300">Pending changes</div>
                <div className="text-amber-700 dark:text-amber-400">
                  {changes.join(' · ')}
                </div>
              </div>
              <div className="flex gap-2 shrink-0">
                <Button variant="ghost" size="sm" className="h-7 text-xs gap-1"
                  onClick={handleDiscard} disabled={applyMutation.isPending}
                >
                  <Undo2 className="h-3 w-3" />Discard
                </Button>
                <Button size="sm" className="h-7 text-xs gap-1"
                  onClick={() => applyMutation.mutate()} disabled={applyMutation.isPending}
                >
                  {applyMutation.isPending ? <Loader2 className="h-3 w-3 animate-spin" /> : <Save className="h-3 w-3" />}
                  Apply
                </Button>
              </div>
            </div>
          )}

          {/* === Footer: subdomains (desktop only) + source + deregister === */}
          <div className="flex items-center justify-between pt-2 border-t border-border/50">
            <div className="flex items-center gap-4">
              {!isMobile && (
                <button
                  type="button"
                  className="text-[10px] text-muted-foreground hover:text-foreground transition-colors"
                  onClick={() => updateDraft({ subdomains: !draft.subdomains })}
                >
                  {draft.subdomains ? '*.wildcard on' : 'wildcard off'}
                </button>
              )}

              <span className="text-[10px] text-muted-foreground">
                Source: <span className="font-mono">{domain.source}</span>
              </span>
            </div>

            <Button
              variant="ghost" size="sm"
              className="h-6 text-[10px] text-red-500 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950/20"
              onClick={e => { e.stopPropagation(); deregisterMutation.mutate(); }}
              disabled={deregisterMutation.isPending}
            >
              {deregisterMutation.isPending
                ? <Loader2 className="h-3 w-3 animate-spin mr-1" />
                : <Trash2 className="h-3 w-3 mr-1" />}
              Deregister
            </Button>
          </div>
        </CardContent>
      )}
    </Card>
  );
}