"use client";

import { useState } from "react";
import { FileText, Download, Eye, Edit, Plus, Trash2, CheckSquare, Square } from "lucide-react";

interface ReportTemplate {
  id: string;
  name: string;
  description: string;
  sections: string[];
  created_at: string;
  usage_count: number;
}

interface GeneratedReport {
  template_name: string;
  generated_at: string;
  content: {
    title: string;
    sections: Array<{
      name: string;
      content: string;
    }>;
  };
}

export default function ReportAssistantPage() {
  const [activeTab, setActiveTab] = useState<"generate" | "templates">("generate");
  const [selectedTemplate, setSelectedTemplate] = useState<string>("");
  const [projectInfo, setProjectInfo] = useState({
    customer_name: "远东新能源公交公司",
    project_type: "对公新能源",
    amount: 3.0,
    risk_level: "medium"
  });

  const [loading, setLoading] = useState(false);
  const [generatedReport, setGeneratedReport] = useState<GeneratedReport | null>(null);

  // 模拟报告模板数据
  const [templates] = useState<ReportTemplate[]>([
    {
      id: "TPL-001",
      name: "标准风险评审报告",
      description: "适用于常规项目的风险评审报告，包含完整的风险分析和建议",
      sections: ["项目概况", "风险识别", "财务分析", "法律合规性", "综合评审意见", "审批建议"],
      created_at: "2025-01-15",
      usage_count: 156
    },
    {
      id: "TPL-002",
      name: "新能源项目专项报告",
      description: "针对新能源行业的专项评审报告，关注政策补贴和行业风险",
      sections: ["项目概况", "行业政策分析", "技术可行性", "财务测算", "风险评估", "审批建议"],
      created_at: "2025-02-10",
      usage_count: 89
    },
    {
      id: "TPL-003",
      name: "大额授信专项报告",
      description: "5亿元以上大额授信项目的详细评审报告",
      sections: ["项目概况", "企业背景调查", "深度财务分析", "抵押物评估", "风险缓释措施", "总部审批建议"],
      created_at: "2025-01-20",
      usage_count: 34
    },
    {
      id: "TPL-004",
      name: "快速审批简报",
      description: "低风险项目的快速审批简报，简化流程",
      sections: ["项目基本信息", "快速风险评估", "审批建议"],
      created_at: "2025-02-01",
      usage_count: 203
    }
  ]);

  const handleGenerateReport = async () => {
    if (!selectedTemplate) {
      alert("请先选择报告模板");
      return;
    }

    setLoading(true);
    setGeneratedReport(null);

    try {
      // 模拟生成报告
      await new Promise(resolve => setTimeout(resolve, 2000));

      const template = templates.find(t => t.id === selectedTemplate)!;

      const mockReport: GeneratedReport = {
        template_name: template.name,
        generated_at: new Date().toLocaleString('zh-CN'),
        content: {
          title: `${projectInfo.customer_name} - ${template.name}`,
          sections: template.sections.map(sectionName => ({
            name: sectionName,
            content: generateMockSectionContent(sectionName, projectInfo)
          }))
        }
      };

      setGeneratedReport(mockReport);
    } catch (error) {
      alert("生成报告失败");
    } finally {
      setLoading(false);
    }
  };

  const generateMockSectionContent = (sectionName: string, info: any): string => {
    switch (sectionName) {
      case "项目概况":
        return `客户名称：${info.customer_name}\n项目类型：${info.project_type}\n授信金额：${info.amount}亿元\n风险等级：${info.risk_level === 'high' ? '高风险' : info.risk_level === 'medium' ? '中风险' : '低风险'}\n\n本项目为${info.project_type}类型融资租赁项目，客户${info.customer_name}申请授信金额${info.amount}亿元。经初步评估，项目风险等级为${info.risk_level === 'high' ? '高风险' : info.risk_level === 'medium' ? '中风险' : '低风险'}。`;

      case "风险识别":
      case "风险评估":
        return `基于双轨驱动分析（规则引擎+历史数据），识别出以下主要风险点：\n\n1. 财务风险：资产负债率接近行业警戒线，需关注偿债能力\n2. 信用风险：征信查询次数偏高，需核实融资需求真实性\n3. 法律风险：存在未结案涉诉记录，需评估潜在影响\n\n历史数据显示，类似项目的通过率为73%，其中60%需要附加风控措施。`;

      case "财务分析":
      case "深度财务分析":
        return `关键财务指标分析：\n\n• 资产负债率：65%（行业平均60%）\n• 流动比率：1.2（良好）\n• 净资产收益率：8.5%（中等）\n• 现金流覆盖倍数：1.8倍\n\n综合评估：财务状况整体可控，但需关注债务结构优化。`;

      case "审批建议":
      case "综合评审意见":
        return `综合评审意见：\n\n建议：附加条件通过\n\n理由：\n1. 客户基本面良好，行业前景明朗\n2. 财务指标整体可控，但需加强风险缓释\n3. 历史同类案例成功率较高\n\n附加条件：\n• 建议降低授信额度10-15%\n• 要求增加抵押物或第三方担保\n• 设置季度财务监控机制`;

      case "行业政策分析":
        return `${info.project_type}行业政策环境：\n\n• 国家政策支持力度大，补贴政策稳定\n• 地方政府配套措施完善\n• 行业准入门槛提高，竞争格局改善\n• 需关注补贴退坡风险`;

      case "技术可行性":
        return `技术方案评估：\n\n• 技术路线成熟，市场验证充分\n• 设备供应商资质良好\n• 运营团队经验丰富\n• 维护保养体系完善`;

      default:
        return `${sectionName}相关内容...\n\n[此部分内容由AI根据项目实际情况和历史数据自动生成]`;
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white p-6">
      {/* Header */}
      <header className="mb-8">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold mb-2 bg-gradient-to-r from-purple-400 to-pink-300 bg-clip-text text-transparent">
              报告助手
            </h1>
            <p className="text-slate-400">智能报告生成与模板管理</p>
          </div>
        </div>
      </header>

      {/* Tab Navigation */}
      <div className="mb-6 flex gap-2">
        <button
          onClick={() => setActiveTab("generate")}
          className={`px-6 py-3 rounded-lg font-medium transition-colors ${
            activeTab === "generate"
              ? "bg-purple-600 text-white"
              : "bg-slate-800 text-slate-400 hover:bg-slate-700"
          }`}
        >
          生成报告
        </button>
        <button
          onClick={() => setActiveTab("templates")}
          className={`px-6 py-3 rounded-lg font-medium transition-colors ${
            activeTab === "templates"
              ? "bg-purple-600 text-white"
              : "bg-slate-800 text-slate-400 hover:bg-slate-700"
          }`}
        >
          模板管理
        </button>
      </div>

      {/* Generate Report Tab */}
      {activeTab === "generate" && (
        <div className="space-y-6">
          {/* Project Info Form */}
          <div className="p-6 bg-slate-800/50 backdrop-blur-sm rounded-xl border border-slate-700">
            <h2 className="text-xl font-bold mb-4 text-purple-400">项目信息</h2>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm text-slate-400 mb-2">客户名称</label>
                <input
                  type="text"
                  value={projectInfo.customer_name}
                  onChange={e => setProjectInfo({ ...projectInfo, customer_name: e.target.value })}
                  className="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-lg text-white focus:outline-none focus:border-purple-500"
                />
              </div>
              <div>
                <label className="block text-sm text-slate-400 mb-2">项目类型</label>
                <input
                  type="text"
                  value={projectInfo.project_type}
                  onChange={e => setProjectInfo({ ...projectInfo, project_type: e.target.value })}
                  className="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-lg text-white focus:outline-none focus:border-purple-500"
                />
              </div>
              <div>
                <label className="block text-sm text-slate-400 mb-2">授信金额（亿元）</label>
                <input
                  type="number"
                  step="0.1"
                  value={projectInfo.amount}
                  onChange={e => setProjectInfo({ ...projectInfo, amount: parseFloat(e.target.value) })}
                  className="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-lg text-white focus:outline-none focus:border-purple-500"
                />
              </div>
              <div>
                <label className="block text-sm text-slate-400 mb-2">风险等级</label>
                <select
                  value={projectInfo.risk_level}
                  onChange={e => setProjectInfo({ ...projectInfo, risk_level: e.target.value })}
                  className="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-lg text-white focus:outline-none focus:border-purple-500"
                >
                  <option value="low">低风险</option>
                  <option value="medium">中风险</option>
                  <option value="high">高风险</option>
                </select>
              </div>
            </div>
          </div>

          {/* Template Selection */}
          <div className="p-6 bg-slate-800/50 backdrop-blur-sm rounded-xl border border-slate-700">
            <h2 className="text-xl font-bold mb-4 text-purple-400">选择报告模板</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {templates.map(template => (
                <div
                  key={template.id}
                  onClick={() => setSelectedTemplate(template.id)}
                  className={`p-4 rounded-lg border-2 cursor-pointer transition-all ${
                    selectedTemplate === template.id
                      ? "border-purple-500 bg-purple-900/30"
                      : "border-slate-700 bg-slate-900/50 hover:border-slate-600"
                  }`}
                >
                  <div className="flex items-start justify-between mb-2">
                    <div className="flex items-center gap-2">
                      {selectedTemplate === template.id ? (
                        <CheckSquare className="w-5 h-5 text-purple-400" />
                      ) : (
                        <Square className="w-5 h-5 text-slate-600" />
                      )}
                      <h3 className="font-bold text-white">{template.name}</h3>
                    </div>
                    <span className="text-xs text-slate-500">{template.id}</span>
                  </div>
                  <p className="text-sm text-slate-400 mb-3">{template.description}</p>
                  <div className="flex items-center gap-4 text-xs text-slate-500">
                    <span>使用次数: {template.usage_count}</span>
                    <span>创建: {template.created_at}</span>
                  </div>
                  <div className="mt-2 text-xs text-slate-500">
                    章节: {template.sections.join(" · ")}
                  </div>
                </div>
              ))}
            </div>

            <button
              onClick={handleGenerateReport}
              disabled={loading || !selectedTemplate}
              className={`mt-6 w-full py-3 rounded-lg font-bold text-lg transition-all ${
                loading || !selectedTemplate
                  ? "bg-slate-700 text-slate-500 cursor-not-allowed"
                  : "bg-gradient-to-r from-purple-600 to-pink-600 hover:shadow-xl hover:scale-[1.02]"
              }`}
            >
              {loading ? "🔄 正在生成报告..." : "📝 生成评审报告"}
            </button>
          </div>

          {/* Generated Report */}
          {generatedReport && (
            <div className="p-6 bg-slate-800/50 backdrop-blur-sm rounded-xl border border-slate-700">
              <div className="flex items-center justify-between mb-6">
                <div>
                  <h2 className="text-xl font-bold text-purple-400">{generatedReport.content.title}</h2>
                  <p className="text-sm text-slate-400">生成时间: {generatedReport.generated_at}</p>
                </div>
                <div className="flex gap-2">
                  <button className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm font-medium flex items-center gap-2 transition-colors">
                    <Eye className="w-4 h-4" />
                    预览
                  </button>
                  <button className="px-4 py-2 bg-green-600 hover:bg-green-700 rounded-lg text-sm font-medium flex items-center gap-2 transition-colors">
                    <Download className="w-4 h-4" />
                    导出
                  </button>
                </div>
              </div>

              <div className="space-y-6">
                {generatedReport.content.sections.map((section, idx) => (
                  <div key={idx} className="p-4 bg-slate-900/50 rounded-lg">
                    <h3 className="text-lg font-bold text-white mb-3">{section.name}</h3>
                    <p className="text-sm text-slate-300 whitespace-pre-line leading-relaxed">
                      {section.content}
                    </p>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      )}

      {/* Templates Tab */}
      {activeTab === "templates" && (
        <div className="space-y-6">
          <div className="flex justify-between items-center">
            <h2 className="text-xl font-bold text-purple-400">报告模板库</h2>
            <button className="px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium flex items-center gap-2 transition-colors">
              <Plus className="w-4 h-4" />
              新建模板
            </button>
          </div>

          <div className="grid grid-cols-1 gap-4">
            {templates.map(template => (
              <div
                key={template.id}
                className="p-6 bg-slate-800/50 backdrop-blur-sm rounded-xl border border-slate-700"
              >
                <div className="flex items-start justify-between mb-4">
                  <div className="flex-1">
                    <div className="flex items-center gap-3 mb-2">
                      <FileText className="w-5 h-5 text-purple-400" />
                      <h3 className="text-lg font-bold text-white">{template.name}</h3>
                      <span className="text-xs text-slate-500 font-mono">{template.id}</span>
                    </div>
                    <p className="text-sm text-slate-400">{template.description}</p>
                  </div>
                  <div className="flex gap-2">
                    <button className="p-2 text-slate-400 hover:text-blue-400 hover:bg-slate-700 rounded-lg transition-colors">
                      <Edit className="w-4 h-4" />
                    </button>
                    <button className="p-2 text-slate-400 hover:text-red-400 hover:bg-slate-700 rounded-lg transition-colors">
                      <Trash2 className="w-4 h-4" />
                    </button>
                  </div>
                </div>

                <div className="flex flex-wrap gap-2 mb-3">
                  {template.sections.map((section, idx) => (
                    <span
                      key={idx}
                      className="px-2 py-1 bg-slate-700 rounded text-xs text-slate-300"
                    >
                      {section}
                    </span>
                  ))}
                </div>

                <div className="flex items-center gap-6 text-xs text-slate-500">
                  <span>使用次数: {template.usage_count}</span>
                  <span>创建时间: {template.created_at}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}