'use client';

import { useEffect, useState } from 'react';
import { useRouter, useParams } from 'next/navigation';
import {
  ArrowLeft,
  GitBranch,
  Plus,
  Eye,
  Edit,
  CheckCircle2,
  Clock,
  Archive,
  Star,
  MoreVertical,
  GitCompare,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  DropdownMenuSeparator,
} from '@/components/ui/dropdown-menu';
import { Badge } from '@/components/ui/badge';
import { toast } from '@/lib/toast';
import { useConfirm } from '@/components/common/feedback/ConfirmProvider';
import { PageState } from '@/components/common/feedback/PageState';
import { useTranslation } from '@/hooks/useTranslation';
import {
  getFormByIdentifier,
  getFormVersions,
  publishFormVersion,
  setDefaultFormVersion,
  deprecateFormVersion,
  type FormDefinition,
  type FormVersion,
} from '@/services/api/forms';
import { ApiClientError } from '@/lib/api-client';

export default function FormVersionsPage() {
  const router = useRouter();
  const params = useParams();
  const formId = params.id as string;
  const confirm = useConfirm();
  const { t } = useTranslation();

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

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

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

  const handlePublish = async (version: number) => {
    try {
      await publishFormVersion(formId, version);
      toast.success(`版本 v${version} 已发布`);
      loadData();
    } catch (error) {
      if (error instanceof ApiClientError) {
        toast.error(`发布失败: ${error.message}`);
      }
    }
  };

  const handleSetDefault = async (version: number) => {
    try {
      await setDefaultFormVersion(formId, version);
      toast.success(`版本 v${version} 已设为默认版本`);
      loadData();
    } catch (error) {
      if (error instanceof ApiClientError) {
        toast.error(`设置失败: ${error.message}`);
      }
    }
  };

  const handleDeprecate = async (version: number) => {
    const confirmed = await confirm({
      title: `确定要废弃版本 v${version} 吗？`,
      variant: 'danger',
    });
    if (!confirmed) return;

    try {
      await deprecateFormVersion(formId, version);
      toast.success(`版本 v${version} 已废弃`);
      loadData();
    } catch (error) {
      if (error instanceof ApiClientError) {
        toast.error(`废弃失败: ${error.message}`);
      }
    }
  };

  const getStatusBadge = (status: string, isDefault: boolean) => {
    if (isDefault) {
      return (
        <Badge className="bg-blue-100 text-blue-700 hover:bg-blue-100">
          <Star className="w-3 h-3 mr-1 fill-current" />
          默认版本
        </Badge>
      );
    }

    // 版本状态：DRAFT → PENDING_REVIEW → PUBLISHED（审核通过=发布）
    const badges: Record<string, { label: string; color: string }> = {
      DRAFT: { label: '草稿', color: 'bg-gray-100 text-gray-800' },
      PENDING_REVIEW: { label: '待审核', color: 'bg-orange-100 text-orange-800' },
      PUBLISHED: { label: '已发布', color: 'bg-green-100 text-green-800' },
      REJECTED: { label: '已驳回', color: 'bg-red-100 text-red-800' },
      DEPRECATED: { label: '已废弃', color: 'bg-yellow-100 text-yellow-800' },
    };
    const badge = badges[status] || badges.DRAFT;
    return <Badge className={`${badge.color} hover:${badge.color}`}>{badge.label}</Badge>;
  };

  if (loading) {
    return (
      <div className="p-8 flex items-center justify-center">
        <div className="text-gray-500">加载中...</div>
      </div>
    );
  }

  if (!form) {
    return (
      <div className="p-8">
        <div className="text-red-600">表单不存在</div>
        <Button variant="outline" onClick={() => router.back()} className="mt-4">
          <ArrowLeft className="w-4 h-4 mr-2" />
          返回
        </Button>
      </div>
    );
  }

  return (
    <div className="p-8 space-y-6">
      {/* 页面头部 */}
      <div>
        <Button variant="ghost" size="sm" onClick={() => router.back()} className="mb-4">
          <ArrowLeft className="w-4 h-4 mr-2" />
          返回
        </Button>

        <div className="flex items-center justify-between">
          <div>
            <div className="flex items-center gap-3">
              <GitBranch className="w-6 h-6 text-blue-600" />
              <h1 className="text-2xl font-bold text-gray-900">版本管理</h1>
            </div>
            <p className="text-sm text-gray-600 mt-2">
              {form.name} · 当前版本 v{form.latestVersion}
            </p>
          </div>
          <div className="flex gap-2">
            <Button
              variant="outline"
              onClick={() => router.push(`/forms/definitions/${formId}/versions/compare`)}
            >
              <GitCompare className="w-4 h-4 mr-2" />
              版本对比
            </Button>
            <Button onClick={() => router.push(`/forms/definitions/${formId}/versions/new`)}>
              <Plus className="w-4 h-4 mr-2" />
              创建新版本
            </Button>
          </div>
        </div>
      </div>

      {/* 版本列表 */}
      <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
        {versions.length === 0 ? (
          <div className="p-8">
            <PageState
              variant="empty"
              title={t.common.noData}
              layout="center"
              className="border-0 bg-transparent"
            />
          </div>
        ) : (
          <div className="divide-y divide-gray-200">
            {versions.map((version) => (
              <div
                key={version.id}
                className="p-6 hover:bg-gray-50 transition-colors"
              >
                <div className="flex items-start justify-between">
                  <div className="flex-1">
                    <div className="flex items-center gap-3 mb-2">
                      <h3 className="text-lg font-semibold text-gray-900">
                        版本 v{version.version}
                      </h3>
                      {getStatusBadge(version.status, version.isDefault)}
                    </div>

                    {version.nameI18n['zh-CN'] && (
                      <p className="text-sm text-gray-900 mb-2">
                        {version.nameI18n['zh-CN']}
                      </p>
                    )}

                    {version.descriptionI18n?.['zh-CN'] && (
                      <p className="text-sm text-gray-600 mb-3">
                        {version.descriptionI18n['zh-CN']}
                      </p>
                    )}

                    {version.changelog && (
                      <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 mb-3">
                        <div className="flex items-start gap-2">
                          <Clock className="w-4 h-4 text-blue-600 mt-0.5" />
                          <div>
                            <div className="text-sm font-medium text-blue-900">更新日志</div>
                            <div className="text-sm text-blue-700 mt-1">{version.changelog}</div>
                          </div>
                        </div>
                      </div>
                    )}

                    <div className="flex items-center gap-6 text-sm text-gray-500">
                      <div className="flex items-center gap-1">
                        <Clock className="w-4 h-4" />
                        <span>创建于 {new Date(version.createdAt).toLocaleDateString('zh-CN')}</span>
                      </div>
                      {version.publishedAt && (
                        <div className="flex items-center gap-1">
                          <CheckCircle2 className="w-4 h-4" />
                          <span>发布于 {new Date(version.publishedAt).toLocaleDateString('zh-CN')}</span>
                        </div>
                      )}
                    </div>
                  </div>

                  <div className="flex items-center gap-2">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => router.push(`/forms/definitions/${formId}/versions/${version.version}`)}
                    >
                      <Eye className="w-4 h-4 mr-1" />
                      查看
                    </Button>

                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="sm">
                          <MoreVertical className="w-4 h-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem
                          onClick={() => router.push(`/forms/definitions/${formId}/versions/${version.version}/edit`)}
                        >
                          <Edit className="w-4 h-4 mr-2" />
                          编辑
                        </DropdownMenuItem>

                        {version.status === 'DRAFT' && (
                          <DropdownMenuItem onClick={() => handlePublish(version.version)}>
                            <CheckCircle2 className="w-4 h-4 mr-2" />
                            发布
                          </DropdownMenuItem>
                        )}

                        {version.status === 'PUBLISHED' && !version.isDefault && (
                          <DropdownMenuItem onClick={() => handleSetDefault(version.version)}>
                            <Star className="w-4 h-4 mr-2" />
                            设为默认
                          </DropdownMenuItem>
                        )}

                        <DropdownMenuSeparator />

                        {version.status === 'PUBLISHED' && (
                          <DropdownMenuItem onClick={() => handleDeprecate(version.version)}>
                            <Archive className="w-4 h-4 mr-2" />
                            废弃
                          </DropdownMenuItem>
                        )}
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* 版本说明 */}
      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
        <h3 className="text-sm font-medium text-blue-900 mb-2">版本管理说明</h3>
        <ul className="text-sm text-blue-700 space-y-1">
          <li>• 创建新版本后，需要发布才能被用户使用</li>
          <li>• 每个表单只能有一个默认版本，新提交的实例将使用默认版本</li>
          <li>• 已提交的表单实例始终绑定到其创建时的版本</li>
          <li>• 废弃的版本仍可查看，但不能再创建新实例</li>
        </ul>
      </div>
    </div>
  );
}