import { useState, useEffect, useCallback } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
  Table, TableHeader, TableBody, TableRow, TableHead, TableCell,
} from '@/components/ui/table';
import {
  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogTrigger,
} from '@/components/ui/dialog';
import {
  RefreshCw, Loader2, Plus, Trash2, Boxes,
  Shield, AlertTriangle, CheckCircle2,
} from 'lucide-react';
import { kubernetesApi } from '@/api';
import { toast } from 'sonner';
import { PageShell } from '@/components/layout/PageShell';
import { ContentPanel } from '@/components/layout/ContentPanel';
import { StatStrip } from '@/components/ui/stat-strip';
import i18n from '@/i18n';

interface NamespaceDetail {
  name: string;
  status: string;
  age: string;
  labels: Record<string, string>;
  resource_counts: Record<string, number>;
  has_resource_quota: boolean;
  has_limit_range: boolean;
  resource_quotas?: Array<{
    metadata: { name: string };
    status: { hard: Record<string, string>; used: Record<string, string> };
  }>;
}

const SYSTEM_NAMESPACES = new Set([
  'kube-system', 'kube-public', 'kube-node-lease', 'default', 'devops',
]);

export default function NamespaceManagementPage() {
  const { clusterCode } = useParams<{ clusterCode: string }>();
  const navigate = useNavigate();
  const [namespaces, setNamespaces] = useState<NamespaceDetail[]>([]);
  const [loading, setLoading] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');

  // Create dialog state
  const [createOpen, setCreateOpen] = useState(false);
  const [newName, setNewName] = useState('');
  const [creating, setCreating] = useState(false);

  // Delete dialog state
  const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
  const [deleting, setDeleting] = useState(false);

  const loadData = useCallback(async () => {
    if (!clusterCode) return;
    setLoading(true);
    try {
      const data = await kubernetesApi.getNamespacesDetail(clusterCode);
      setNamespaces(Array.isArray(data) ? data : []);
    } catch {
      setNamespaces([]);
    } finally {
      setLoading(false);
    }
  }, [clusterCode]);

  useEffect(() => { loadData(); }, [loadData]);

  const handleCreate = async () => {
    if (!clusterCode || !newName.trim()) return;
    setCreating(true);
    try {
      await kubernetesApi.createNamespace(clusterCode, newName.trim());
      setNewName('');
      setCreateOpen(false);
      await loadData();
    } catch (err) {
      toast.error(err?.message || i18n.t('monitor.dashboard.custom.toastCreateFailed'));
    } finally {
      setCreating(false);
    }
  };

  const handleDelete = async () => {
    if (!clusterCode || !deleteTarget) return;
    setDeleting(true);
    try {
      await kubernetesApi.deleteNamespace(clusterCode, deleteTarget);
      setDeleteTarget(null);
      await loadData();
    } catch (err) {
      toast.error(err?.message || i18n.t('kubernetes.msg.deleteFailed2'));
    } finally {
      setDeleting(false);
    }
  };

  const filtered = namespaces.filter(ns =>
    !searchQuery || ns.name.toLowerCase().includes(searchQuery.toLowerCase())
  );

  const totalDeploys = namespaces.reduce((s, n) => s + (n.resource_counts?.deployments || 0), 0);
  const totalPods = namespaces.reduce((s, n) => s + (n.resource_counts?.pods || 0), 0);
  const totalSvcs = namespaces.reduce((s, n) => s + (n.resource_counts?.services || 0), 0);
  const quotaCount = namespaces.filter(n => n.has_resource_quota).length;

  const searchToolbar = (
    <Input
      value={searchQuery}
      onChange={(e) => setSearchQuery(e.target.value)}
      placeholder={i18n.t('kubernetes.namespacemanage.se91247a0')}
      className="max-w-xs dg-input"
    />
  );

  return (
    <PageShell
      variant="list"
      title={i18n.t('kubernetes.namespacemanage.se935a33d')}
      subtitle={`${clusterCode} · 资源配额与生命周期管理`}
      icon={<Boxes className="h-5 w-5" />}
      metrics={!loading ? (
        <StatStrip
          items={[
            { label: i18n.t('kubernetes.namespace.title'), value: namespaces.length, color: 'green' },
            { label: 'Deployments', value: totalDeploys, color: 'blue' },
            { label: 'Pods', value: totalPods, color: 'purple' },
            { label: 'Services', value: totalSvcs, color: 'cyan' },
            { label: i18n.t('kubernetes.namespacemanage.s47c3aee9'), value: quotaCount, color: 'amber' },
          ]}
        />
      ) : undefined}
      actions={(
        <>
          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadData} disabled={loading}>
            <RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
            刷新
          </Button>
          <Dialog open={createOpen} onOpenChange={setCreateOpen}>
            <DialogTrigger asChild>
              <Button size="sm" className="dg-btn-primary">
                <Plus className="h-4 w-4 mr-1" />创建命名空间
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle> {i18n.t('kubernetes.namespacemanage.s737f41e9')} </DialogTitle>
              </DialogHeader>
              <div className="space-y-4 py-4">
                <div className="space-y-2">
                  <Label> {i18n.t('kubernetes.namespace.namespaceName')} </Label>
                  <Input
                    value={newName}
                    onChange={(e) => setNewName(e.target.value)}
                    placeholder={i18n.t('kubernetes.namespacemanage.scba00862')}
                    onKeyDown={(e) => e.key === 'Enter' && handleCreate()}
                  />
                  <p className="text-xs text-[var(--dg-text-muted)]">
                    名称需符合 DNS-1123 标准（小写字母/数字/连字符）
                  </p>
                </div>
              </div>
              <DialogFooter>
                <Button variant="outline" onClick={() => setCreateOpen(false)}> {i18n.t('rbac.jobRole.cancel')} </Button>
                <Button onClick={handleCreate} disabled={creating || !newName.trim()}>
                  {creating ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : null}
                  创建
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </>
      )}
    >
      <ContentPanel toolbar={searchToolbar}>
          <Table>
            <TableHeader>
              <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
                <TableHead className="text-[var(--dg-text-secondary)]"> {i18n.t('kubernetes.secret.secretName')} </TableHead>
                <TableHead className="text-[var(--dg-text-secondary)]"> {i18n.t('system.terminalStatus')} </TableHead>
                <TableHead className="text-[var(--dg-text-secondary)]"> {i18n.t('kubernetes.namespacemanage.sa01a9963')} </TableHead>
                <TableHead className="text-[var(--dg-text-secondary)] text-center">Deploy</TableHead>
                <TableHead className="text-[var(--dg-text-secondary)] text-center">Pods</TableHead>
                <TableHead className="text-[var(--dg-text-secondary)] text-center">Svc</TableHead>
                <TableHead className="text-[var(--dg-text-secondary)] text-center"> {i18n.t('common.quota')} </TableHead>
                <TableHead className="text-[var(--dg-text-secondary)]"> {i18n.t('kubernetes.namespace.labels')} </TableHead>
                <TableHead className="text-[var(--dg-text-secondary)] text-center"> {i18n.t('system.auditAction')} </TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {loading ? (
                <TableRow><TableCell colSpan={9} className="text-center text-[var(--dg-text-muted)] py-12">
                  <Loader2 className="h-5 w-5 animate-spin mx-auto mb-2" />加载中...
                </TableCell></TableRow>
              ) : filtered.length === 0 ? (
                <TableRow><TableCell colSpan={9} className="text-center text-[var(--dg-text-muted)] py-12">
                  <Boxes className="h-8 w-8 mx-auto mb-2 opacity-50" />暂无命名空间
                </TableCell></TableRow>
              ) : (
                filtered.map((ns) => {
                  const isSystem = SYSTEM_NAMESPACES.has(ns.name);
                  return (
                    <TableRow key={ns.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/30">
                      <TableCell className="font-medium">
                        <button
                          className="text-[var(--dg-blue)] hover:text-[var(--dg-blue)] hover:underline text-left"
                          onClick={() => navigate(`/kubernetes/${clusterCode}/namespace/${ns.name}`)}
                        >
                          {ns.name}
                        </button>
                      </TableCell>
                      <TableCell>
                        <Badge className={ns.status === 'Active' ? 'bg-[var(--dg-green)]/20 text-[var(--dg-green)]' : 'bg-[var(--dg-red)]/20 text-[var(--dg-red)]'}>
                          {ns.status === 'Active' ? <CheckCircle2 className="h-3 w-3 mr-1" /> : <AlertTriangle className="h-3 w-3 mr-1" />}
                          {ns.status}
                        </Badge>
                      </TableCell>
                      <TableCell className="text-sm text-[var(--dg-text-secondary)]">{ns.age}</TableCell>
                      <TableCell className="text-center text-sm text-[var(--dg-text-secondary)]">{ns.resource_counts?.deployments ?? 0}</TableCell>
                      <TableCell className="text-center text-sm text-[var(--dg-text-secondary)]">{ns.resource_counts?.pods ?? 0}</TableCell>
                      <TableCell className="text-center text-sm text-[var(--dg-text-secondary)]">{ns.resource_counts?.services ?? 0}</TableCell>
                      <TableCell className="text-center">
                        {ns.has_resource_quota ? (
                          <Badge className="bg-[var(--dg-orange)]/20 text-[var(--dg-orange)]" title={JSON.stringify(ns.resource_quotas?.[0]?.status)}>
                            <Shield className="h-3 w-3 mr-1" />有
                          </Badge>
                        ) : (
                          <span className="text-xs text-[var(--dg-text-muted)]">-</span>
                        )}
                      </TableCell>
                      <TableCell className="text-xs">
                        {ns.labels && Object.keys(ns.labels).length > 0 ? (
                          <div className="flex flex-wrap gap-1 max-w-[200px]">
                            {Object.entries(ns.labels).slice(0, 3).map(([k, v]) => (
                              <span key={k} className="px-1.5 py-0.5 bg-[var(--dg-bg-tertiary)] rounded text-[var(--dg-text-secondary)]">{k}={v}</span>
                            ))}
                            {Object.keys(ns.labels).length > 3 && (
                              <span className="text-[var(--dg-text-muted)]">+{Object.keys(ns.labels).length - 3}</span>
                            )}
                          </div>
                        ) : (
                          <span className="text-[var(--dg-text-muted)]">-</span>
                        )}
                      </TableCell>
                      <TableCell className="text-center">
                        {isSystem ? (
                          <span className="text-xs text-[var(--dg-text-muted)]"> {i18n.t('common.system3')} </span>
                        ) : (
                          <Button
                            variant="ghost" size="icon"
                            className="h-7 w-7 text-[var(--dg-red)] hover:text-[var(--dg-red)] hover:bg-[var(--dg-red)]/10"
                            onClick={() => setDeleteTarget(ns.name)}
                            title={i18n.t('kubernetes.namespace.deleteNamespace')}
                          >
                            <Trash2 className="h-3.5 w-3.5" />
                          </Button>
                        )}
                      </TableCell>
                    </TableRow>
                  );
                })
              )}
            </TableBody>
          </Table>
      </ContentPanel>

      {/* Delete confirmation dialog */}
      <Dialog open={!!deleteTarget} onOpenChange={(open) => !open && setDeleteTarget(null)}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle className="text-[var(--dg-red)] flex items-center gap-2">
              <AlertTriangle className="h-5 w-5" />删除命名空间
            </DialogTitle>
          </DialogHeader>
          <div className="space-y-3 py-4">
            <div className="bg-[var(--dg-red)]/10 border border-[var(--dg-red)]/30 rounded-lg p-3">
              <p className="text-sm text-[var(--dg-red)]">
                ⚠️ 即将删除命名空间 <span className="font-bold">{deleteTarget}</span> 及其中所有资源。
              </p>
              <p className="text-xs text-[var(--dg-red)]/70 mt-1">
                此操作不可逆，所有 Deployment/Pod/Service/ConfigMap 等资源将被永久删除。
              </p>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDeleteTarget(null)}> {i18n.t('rbac.jobRole.cancel')} </Button>
            <Button variant="destructive" onClick={handleDelete} disabled={deleting}>
              {deleting ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : null}
              确认删除
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </PageShell>
  );
}