'use client';

import { useEffect, useState, use } from 'react';
import { useRouter } from 'next/navigation';
import {
  ArrowLeft,
  FileText,
  GitBranch,
  Settings,
  Palette,
  Languages,
  BarChart3,
  Copy,
  Archive,
  Trash2,
  Globe,
  CheckCircle2,
  Clock,
  AlertCircle,
  Send,
  Eye,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  DropdownMenuSeparator,
} from '@/components/ui/dropdown-menu';
import { toast } from '@/lib/toast';
import { useConfirm } from '@/components/common/feedback/ConfirmProvider';
import {
  getFormByIdentifier,
  getFormVersions,
  publishForm,
  archiveForm,
  deleteForm,
  type FormDefinition,
  type FormVersion,
} from '@/services/api/forms';
import { ApiClientError } from '@/lib/api-client';

interface PageProps {
  params: Promise<{ id: string }>;
}

export default function FormDefinitionDetailPage({ params }: PageProps) {
  const router = useRouter();
  const confirm = useConfirm();
  const resolvedParams = use(params);
  const formIdentifier = resolvedParams.id;

  const [form, setForm] = useState<FormDefinition | null>(null);
  const [versions, setVersions] = useState<FormVersion[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    loadFormData();
  }, [formIdentifier]);

  const loadFormData = async () => {
    try {
      setLoading(true);
      setError(null);
      const [formData, versionsData] = await Promise.all([
        getFormByIdentifier(formIdentifier),
        getFormVersions(formIdentifier),
      ]);
      setForm(formData);
      setVersions(versionsData);
    } catch (err) {
      if (err instanceof ApiClientError) {
        setError(err.message);
        toast.error(`加载失败: ${err.message}`);
      }
    } finally {
      setLoading(false);
    }
  };

  const handlePublish = async () => {
    if (!form) return;
    try {
      await publishForm(form.key);
      toast.success('表单已发布');
      loadFormData();
    } catch (err) {
      if (err instanceof ApiClientError) {
        toast.error(`发布失败: ${err.message}`);
      }
    }
  };

  const handleArchive = async () => {
    const confirmed = await confirm({
      title: '确定要归档此表单吗？归档后用户将无法使用。',
      variant: 'danger',
    });
    if (!form || !confirmed) return;
    try {
      await archiveForm(form.key);
      toast.success('表单已归档');
      loadFormData();
    } catch (err) {
      if (err instanceof ApiClientError) {
        toast.error(`归档失败: ${err.message}`);
      }
    }
  };

  const handleDelete = async () => {
    const confirmed = await confirm({
      title: '确定要删除此表单吗？此操作不可恢复。',
      variant: 'danger',
    });
    if (!form || !confirmed) return;
    try {
      await deleteForm(form.key);
      toast.success('表单已删除');
      router.push('/forms/definitions');
    } catch (err) {
      if (err instanceof ApiClientError) {
        toast.error(`删除失败: ${err.message}`);
      }
    }
  };

  const getStatusConfig = (status: string) => {
    const configs: Record<string, { label: string; color: string; icon: typeof CheckCircle2 }> = {
      DRAFT: { label: '草稿', color: 'bg-gray-100 text-gray-700', icon: Clock },
      PUBLISHED: { label: '已发布', color: 'bg-green-100 text-green-700', icon: CheckCircle2 },
      ARCHIVED: { label: '已归档', color: 'bg-yellow-100 text-yellow-700', icon: Archive },
    };
    return configs[status] || configs.DRAFT;
  };

  const getVersionStatusConfig = (status: string) => {
    const configs: Record<string, { label: string; color: string }> = {
      DRAFT: { label: '草稿', color: 'bg-gray-100 text-gray-700' },
      PENDING_REVIEW: { label: '待审核', color: 'bg-orange-100 text-orange-700' },
      PUBLISHED: { label: '已发布', color: 'bg-green-100 text-green-700' },
      REJECTED: { label: '已驳回', color: 'bg-red-100 text-red-700' },
      DEPRECATED: { label: '已废弃', color: 'bg-gray-100 text-gray-500' },
    };
    return configs[status] || configs.DRAFT;
  };

  if (loading) {
    return (
      <div className="p-8 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
          <p className="mt-2 text-gray-600">加载中...</p>
        </div>
      </div>
    );
  }

  if (error || !form) {
    return (
      <div className="p-8">
        <div className="bg-red-50 border border-red-200 rounded-lg p-6 text-center">
          <AlertCircle className="w-12 h-12 text-red-500 mx-auto mb-4" />
          <h2 className="text-lg font-semibold text-red-800 mb-2">加载失败</h2>
          <p className="text-red-600 mb-4">{error || '表单不存在'}</p>
          <Button variant="outline" onClick={() => router.back()}>
            <ArrowLeft className="w-4 h-4 mr-2" />
            返回
          </Button>
        </div>
      </div>
    );
  }

  const statusConfig = getStatusConfig(form.status);
  const StatusIcon = statusConfig.icon;
  const defaultVersion = versions.find(v => v.isDefault);
  const latestVersion = versions.find(v => v.version === form.latestVersion);

  return (
    <div className="p-8 space-y-6">
      {/* 页面头部 */}
      <div className="flex items-start justify-between">
        <div className="flex items-start gap-4">
          <Button
            variant="ghost"
            size="sm"
            onClick={() => router.push('/forms/definitions')}
          >
            <ArrowLeft className="w-4 h-4 mr-1" />
            返回
          </Button>
          
          <div className="flex items-center gap-4">
            <div className={`w-14 h-14 rounded-xl flex items-center justify-center ${form.color || 'bg-blue-100'}`}>
              <FileText className="w-7 h-7 text-blue-600" />
            </div>
            <div>
              <div className="flex items-center gap-3">
                <h1 className="text-2xl font-bold text-gray-900">{form.name}</h1>
                <span className={`inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium ${statusConfig.color}`}>
                  <StatusIcon className="w-3 h-3" />
                  {statusConfig.label}
                </span>
              </div>
              <div className="flex items-center gap-4 mt-1 text-sm text-gray-500">
                <span className="font-mono">{form.key}</span>
                <span>·</span>
                <span>{form.category}</span>
                <span>·</span>
                <span>v{form.latestVersion}</span>
              </div>
              {form.description && (
                <p className="text-sm text-gray-600 mt-2">{form.description}</p>
              )}
            </div>
          </div>
        </div>

        <div className="flex items-center gap-2">
          <Button
            variant="outline"
            onClick={() => router.push(`/forms/definitions/${form.id}/design`)}
          >
            <Palette className="w-4 h-4 mr-2" />
            设计表单
          </Button>
          
          {form.status === 'DRAFT' && (
            <Button onClick={handlePublish}>
              <Send className="w-4 h-4 mr-2" />
              发布表单
            </Button>
          )}

          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="outline">
                <Settings className="w-4 h-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem onClick={() => router.push(`/forms/definitions/${form.key}/versions`)}>
                <GitBranch className="w-4 h-4 mr-2" />
                版本管理
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => router.push(`/forms/translations?form=${form.key}`)}>
                <Languages className="w-4 h-4 mr-2" />
                翻译管理
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => toast.info('复制功能开发中')}>
                <Copy className="w-4 h-4 mr-2" />
                复制表单
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              {form.status !== 'ARCHIVED' && (
                <DropdownMenuItem onClick={handleArchive}>
                  <Archive className="w-4 h-4 mr-2" />
                  归档表单
                </DropdownMenuItem>
              )}
              <DropdownMenuItem onClick={handleDelete} className="text-red-600">
                <Trash2 className="w-4 h-4 mr-2" />
                删除表单
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>

      {/* 内容区 */}
      <Tabs defaultValue="overview" className="space-y-6">
        <TabsList>
          <TabsTrigger value="overview">概览</TabsTrigger>
          <TabsTrigger value="versions">版本 ({versions.length})</TabsTrigger>
          <TabsTrigger value="settings">配置</TabsTrigger>
        </TabsList>

        {/* 概览 */}
        <TabsContent value="overview" className="space-y-6">
          {/* 快捷操作卡片 */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <button
              onClick={() => router.push(`/forms/definitions/${form.id}/design`)}
              className="bg-white p-6 rounded-lg border border-gray-200 text-left hover:shadow-md transition-shadow group"
            >
              <Palette className="w-8 h-8 text-blue-600 mb-3" />
              <h3 className="font-semibold text-gray-900 group-hover:text-blue-600">设计表单</h3>
              <p className="text-sm text-gray-500 mt-1">拖拽编辑表单结构</p>
            </button>
            
            <button
              onClick={() => router.push(`/forms/definitions/${form.key}/versions`)}
              className="bg-white p-6 rounded-lg border border-gray-200 text-left hover:shadow-md transition-shadow group"
            >
              <GitBranch className="w-8 h-8 text-purple-600 mb-3" />
              <h3 className="font-semibold text-gray-900 group-hover:text-purple-600">版本管理</h3>
              <p className="text-sm text-gray-500 mt-1">{versions.length} 个版本</p>
            </button>
            
            <button
              onClick={() => toast.info('预览功能开发中')}
              className="bg-white p-6 rounded-lg border border-gray-200 text-left hover:shadow-md transition-shadow group"
            >
              <Eye className="w-8 h-8 text-green-600 mb-3" />
              <h3 className="font-semibold text-gray-900 group-hover:text-green-600">预览表单</h3>
              <p className="text-sm text-gray-500 mt-1">查看表单效果</p>
            </button>
          </div>

          {/* 表单信息 */}
          <div className="bg-white rounded-lg border border-gray-200 p-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-4">表单信息</h2>
            <dl className="grid grid-cols-2 gap-x-8 gap-y-4">
              <div>
                <dt className="text-sm text-gray-500">Key (不可变)</dt>
                <dd className="mt-1 font-mono text-sm text-gray-900">{form.key}</dd>
              </div>
              <div>
                <dt className="text-sm text-gray-500">Slug (URL 标识)</dt>
                <dd className="mt-1 font-mono text-sm text-gray-900">{form.slug}</dd>
              </div>
              <div>
                <dt className="text-sm text-gray-500">分类</dt>
                <dd className="mt-1 text-sm text-gray-900">{form.category}</dd>
              </div>
              <div>
                <dt className="text-sm text-gray-500">默认语言</dt>
                <dd className="mt-1 text-sm text-gray-900">{form.defaultLocale}</dd>
              </div>
              <div>
                <dt className="text-sm text-gray-500">支持语言</dt>
                <dd className="mt-1 flex items-center gap-2">
                  {form.supportedLocales.map(locale => (
                    <span key={locale} className="px-2 py-0.5 bg-gray-100 rounded text-xs text-gray-700">
                      {locale}
                    </span>
                  ))}
                </dd>
              </div>
              <div>
                <dt className="text-sm text-gray-500">需要审批</dt>
                <dd className="mt-1 text-sm text-gray-900">
                  {form.requiresApproval ? (
                    <span className="text-green-600">是 ({form.approvalProcessKey})</span>
                  ) : (
                    <span className="text-gray-500">否</span>
                  )}
                </dd>
              </div>
              <div>
                <dt className="text-sm text-gray-500">创建时间</dt>
                <dd className="mt-1 text-sm text-gray-900">
                  {new Date(form.createdAt).toLocaleString('zh-CN')}
                </dd>
              </div>
              <div>
                <dt className="text-sm text-gray-500">更新时间</dt>
                <dd className="mt-1 text-sm text-gray-900">
                  {new Date(form.updatedAt).toLocaleString('zh-CN')}
                </dd>
              </div>
            </dl>
          </div>

          {/* 别名 */}
          {form.aliases && form.aliases.length > 0 && (
            <div className="bg-white rounded-lg border border-gray-200 p-6">
              <h2 className="text-lg font-semibold text-gray-900 mb-4">别名</h2>
              <div className="flex flex-wrap gap-2">
                {form.aliases.map(alias => (
                  <span key={alias} className="px-3 py-1 bg-blue-50 text-blue-700 rounded-full text-sm">
                    {alias}
                  </span>
                ))}
              </div>
            </div>
          )}
        </TabsContent>

        {/* 版本列表 */}
        <TabsContent value="versions">
          <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
            <div className="p-4 border-b border-gray-200 flex items-center justify-between">
              <h2 className="font-semibold text-gray-900">版本历史</h2>
              <Button
                size="sm"
                onClick={() => router.push(`/forms/definitions/${form.id}/design`)}
              >
                编辑最新版本
              </Button>
            </div>
            <div className="divide-y divide-gray-200">
              {versions.map((version) => {
                const versionStatus = getVersionStatusConfig(version.status);
                return (
                  <div key={version.id} className="p-4 hover:bg-gray-50">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-3">
                        <span className="text-lg font-semibold text-gray-900">v{version.version}</span>
                        <span className={`px-2 py-0.5 rounded text-xs font-medium ${versionStatus.color}`}>
                          {versionStatus.label}
                        </span>
                        {version.isDefault && (
                          <span className="px-2 py-0.5 bg-blue-100 text-blue-700 rounded text-xs font-medium">
                            默认
                          </span>
                        )}
                      </div>
                      <div className="flex items-center gap-4 text-sm text-gray-500">
                        <span>
                          {new Date(version.createdAt).toLocaleDateString('zh-CN')}
                        </span>
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => router.push(`/forms/definitions/${form.key}/design?version=${version.version}`)}
                        >
                          查看
                        </Button>
                      </div>
                    </div>
                    {version.changelog && (
                      <p className="text-sm text-gray-600 mt-2">{version.changelog}</p>
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        </TabsContent>

        {/* 配置 */}
        <TabsContent value="settings">
          <div className="bg-white rounded-lg border border-gray-200 p-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-4">表单配置</h2>
            <p className="text-gray-500">配置编辑功能开发中...</p>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
}