import { useState } from "react";
import { Download, RefreshCcw, Sparkles } from "lucide-react";
import { TabsContent } from "@/components/ui/tabs";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import type {
  AIStewardTab,
  BriefingTarget,
  DailyBriefingV2Payload,
  EngineMessage,
  ExecutiveBriefingConfig,
  ExecutiveBriefingPayload,
  ExecutiveBriefingSection,
} from "@/pages/ai-steward/types";
import BriefingDetailDrawer from "../components/BriefingDetailDrawer";
import BriefingSectionCard from "../components/BriefingSectionCard";
import BriefingTab from "./BriefingTab";

interface OverviewTabProps {
  canManageExecutiveBriefing: boolean;
  dailyBriefing: DailyBriefingV2Payload | null;
  dailyBriefingError: string | null;
  dailyBriefingLoading: boolean;
  username?: string;
  executiveBriefing: ExecutiveBriefingPayload | null;
  executiveBriefingError: string | null;
  executiveBriefingMode: "snapshot" | "live";
  executiveBriefingLoading: boolean;
  executiveBriefingConfigDraft: ExecutiveBriefingConfig;
  executiveBriefingConfigLoading: boolean;
  executiveBriefingConfigError: string | null;
  executiveBriefingSaveLoading: boolean;
  executiveBriefingSaveMessage: EngineMessage | null;
  onLoadSnapshot: () => void;
  onRefreshLive: () => void;
  onExportReport: () => void;
  onConfigChange: (patch: Partial<ExecutiveBriefingConfig>) => void;
  onSaveConfig: () => void;
  onOpenTarget: (target?: BriefingTarget | null, fallbackTab?: AIStewardTab) => void;
}

const SECTION_STYLE: Record<string, string> = {
  decisions: "border-amber-200 bg-amber-50/70 dark:border-amber-900 dark:bg-amber-950/30",
  input_health: "border-sky-200 bg-sky-50/70 dark:border-sky-900 dark:bg-sky-950/30",
  delivery_risk: "border-rose-200 bg-rose-50/70 dark:border-rose-900 dark:bg-rose-950/30",
  team_capacity: "border-emerald-200 bg-emerald-50/70 dark:border-emerald-900 dark:bg-emerald-950/30",
  ai_governance: "border-indigo-200 bg-indigo-50/70 dark:border-indigo-900 dark:bg-indigo-950/30",
  external_metrics: "border-slate-200 bg-slate-50/70 dark:border-slate-800 dark:bg-slate-950/30",
};

function formatTimestamp(value?: string | null): string {
  if (!value) return "-";
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return value;
  return date.toLocaleString("zh-CN", {
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
  });
}

function formatMetricValue(value: string | number): string {
  return typeof value === "number" ? String(value) : value;
}

function toneBadgeClass(tone: string): string {
  switch (tone) {
    case "critical":
      return "bg-rose-100 text-rose-700 dark:bg-rose-950 dark:text-rose-200";
    case "warning":
      return "bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-200";
    case "positive":
      return "bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-200";
    case "info":
      return "bg-sky-100 text-sky-700 dark:bg-sky-950 dark:text-sky-200";
    default:
      return "bg-slate-100 text-slate-700 dark:bg-slate-900 dark:text-slate-200";
  }
}

export default function OverviewTab({
  canManageExecutiveBriefing,
  dailyBriefing,
  dailyBriefingError,
  dailyBriefingLoading,
  username,
  executiveBriefing,
  executiveBriefingError,
  executiveBriefingMode,
  executiveBriefingLoading,
  executiveBriefingConfigDraft,
  executiveBriefingConfigLoading,
  executiveBriefingConfigError,
  executiveBriefingSaveLoading,
  executiveBriefingSaveMessage,
  onLoadSnapshot,
  onRefreshLive,
  onExportReport,
  onConfigChange,
  onSaveConfig,
  onOpenTarget,
}: OverviewTabProps) {
  const [drawerSection, setDrawerSection] = useState<ExecutiveBriefingSection | null>(null);
  const [drawerProjectKey, setDrawerProjectKey] = useState<string | null>(null);

  if (!canManageExecutiveBriefing) {
    return (
      <BriefingTab
        tabValue="overview"
        briefing={dailyBriefing}
        briefingError={dailyBriefingError}
        briefingLoading={dailyBriefingLoading}
        briefingMode={executiveBriefingMode}
        username={username}
        onLoadSnapshot={onLoadSnapshot}
        onRefreshLive={onRefreshLive}
        onExportReport={onExportReport}
        onOpenTarget={onOpenTarget}
      />
    );
  }

  const sections = executiveBriefing?.sections ?? [];
  const hero = executiveBriefing?.hero;
  const openDrawer = (section: ExecutiveBriefingSection, projectKey?: string) => {
    setDrawerSection(section);
    setDrawerProjectKey(projectKey || null);
  };

  return (
    <TabsContent value="overview" className="mt-6">
      <div className="space-y-6">
        <Card className="overflow-hidden border-amber-200 bg-gradient-to-br from-stone-50 via-amber-50 to-orange-100 shadow-sm dark:border-amber-900 dark:from-slate-950 dark:via-stone-950 dark:to-amber-950/50">
          <CardContent className="p-6">
            <div className="flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between">
              <div className="space-y-4">
                <div className="flex flex-wrap items-center gap-3">
                  <Badge className="bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-900">
                    {executiveBriefingMode === "live" ? "实时版" : "晨报快照"}
                  </Badge>
                  {hero?.snapshot_state === "missing" && (
                    <Badge className="bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-200">
                      今日快照未生成
                    </Badge>
                  )}
                </div>
                <div>
                  <h2 className="flex items-center gap-3 text-3xl font-semibold tracking-tight text-slate-950 dark:text-slate-50">
                    <Sparkles className="h-7 w-7 text-amber-600 dark:text-amber-300" />
                    简报中心
                  </h2>
                  <p className="mt-2 max-w-3xl text-sm leading-6 text-slate-600 dark:text-slate-300">
                    先看异常，再按项目展开预览，右侧抽屉里看完整详情并决定下一步去项目、成员还是工作台。
                  </p>
                </div>
                <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
                  <div className="rounded-2xl border border-slate-200/80 bg-white/80 p-4 dark:border-slate-800 dark:bg-slate-900/70">
                    <p className="text-sm text-slate-500">需拍板事项</p>
                    <p className="mt-2 text-3xl font-semibold text-slate-950 dark:text-slate-50">{hero?.decision_count ?? 0}</p>
                  </div>
                  <div className="rounded-2xl border border-slate-200/80 bg-white/80 p-4 dark:border-slate-800 dark:bg-slate-900/70">
                    <p className="text-sm text-slate-500">异常总数</p>
                    <p className="mt-2 text-3xl font-semibold text-slate-950 dark:text-slate-50">{hero?.anomaly_count ?? 0}</p>
                  </div>
                  <div className="rounded-2xl border border-slate-200/80 bg-white/80 p-4 dark:border-slate-800 dark:bg-slate-900/70">
                    <p className="text-sm text-slate-500">查看日期</p>
                    <p className="mt-2 text-3xl font-semibold text-slate-950 dark:text-slate-50">
                      {executiveBriefing?.brief_date || "-"}
                    </p>
                  </div>
                </div>
              </div>

              <div className="min-w-0 space-y-3 xl:w-[380px]">
                <div className="rounded-2xl border border-slate-200/80 bg-white/80 p-4 text-sm dark:border-slate-800 dark:bg-slate-900/70">
                  <div className="flex items-center justify-between gap-3">
                    <span className="text-slate-500">晨报快照</span>
                    <span className="font-medium text-slate-900 dark:text-slate-100">{formatTimestamp(hero?.baseline_generated_at)}</span>
                  </div>
                  <div className="mt-2 flex items-center justify-between gap-3">
                    <span className="text-slate-500">实时刷新</span>
                    <span className="font-medium text-slate-900 dark:text-slate-100">{formatTimestamp(hero?.live_generated_at)}</span>
                  </div>
                </div>
                <div className="flex flex-wrap gap-2">
                  {(hero?.key_alerts ?? []).map((item) => (
                    <Badge key={`${item.label}-${item.value}`} className={toneBadgeClass(item.tone)}>
                      {item.label} {formatMetricValue(item.value)}
                    </Badge>
                  ))}
                </div>
                <div className="flex flex-wrap gap-3">
                  <Button
                    variant="outline"
                    onClick={onLoadSnapshot}
                    disabled={executiveBriefingLoading}
                    className="border-slate-300 bg-white/80 dark:border-slate-700 dark:bg-slate-900/60"
                  >
                    查看晨报快照
                  </Button>
                  <Button
                    onClick={onRefreshLive}
                    disabled={executiveBriefingLoading}
                    className="bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200"
                  >
                    <RefreshCcw className="mr-2 h-4 w-4" />
                    实时刷新
                  </Button>
                  <Button
                    variant="outline"
                    onClick={onExportReport}
                    disabled={!executiveBriefing}
                    className="border-slate-300 bg-white/80 dark:border-slate-700 dark:bg-slate-900/60"
                  >
                    <Download className="mr-2 h-4 w-4" />
                    导出报告
                  </Button>
                </div>
              </div>
            </div>
            {executiveBriefingLoading && (
              <p className="mt-4 text-sm text-slate-500 dark:text-slate-400">正在更新晨报数据...</p>
            )}
            {executiveBriefingError && (
              <p className="mt-4 rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700 dark:border-rose-900 dark:bg-rose-950/40 dark:text-rose-200">
                {executiveBriefingError}
              </p>
            )}
          </CardContent>
        </Card>

        <div className="grid grid-cols-1 gap-5 xl:grid-cols-2">
          {sections.map((section) => (
            <BriefingSectionCard
              key={section.key}
              section={section}
              className={SECTION_STYLE[section.key] || SECTION_STYLE.external_metrics}
              emptyMessage="当前区块暂无新的异常或风险提示。"
              onOpenDrawer={openDrawer}
            />
          ))}
        </div>

        <Card className="border-slate-200 shadow-sm dark:border-slate-800">
          <CardContent className="p-6">
            <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
              <div className="max-w-xl">
                <h3 className="text-xl font-semibold text-slate-950 dark:text-slate-50">晨报调度配置</h3>
                <p className="mt-2 text-sm leading-6 text-slate-600 dark:text-slate-300">
                  这份配置是租户级的。修改后，Web 快照、定时调度和管理群自动推送都会沿用同一套晨报口径。
                </p>
              </div>
              <div className="flex items-center gap-3">
                <span className="text-sm text-slate-500">自动发送</span>
                <Switch
                  checked={executiveBriefingConfigDraft.enabled}
                  onCheckedChange={(checked) => onConfigChange({ enabled: checked })}
                  disabled={executiveBriefingConfigLoading || executiveBriefingSaveLoading}
                />
              </div>
            </div>

            <div className="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
              <div className="space-y-2">
                <p className="text-sm font-medium text-slate-700 dark:text-slate-200">发送时间</p>
                <Input
                  type="time"
                  value={executiveBriefingConfigDraft.send_time}
                  onChange={(event) => onConfigChange({ send_time: event.target.value })}
                  disabled={executiveBriefingConfigLoading || executiveBriefingSaveLoading}
                />
              </div>
              <div className="space-y-2">
                <p className="text-sm font-medium text-slate-700 dark:text-slate-200">发送周期</p>
                <div className="flex gap-2">
                  <Button
                    variant={executiveBriefingConfigDraft.send_cycle === "workdays" ? "default" : "outline"}
                    size="sm"
                    onClick={() => onConfigChange({ send_cycle: "workdays" })}
                    disabled={executiveBriefingConfigLoading || executiveBriefingSaveLoading}
                  >
                    工作日
                  </Button>
                  <Button
                    variant={executiveBriefingConfigDraft.send_cycle === "daily" ? "default" : "outline"}
                    size="sm"
                    onClick={() => onConfigChange({ send_cycle: "daily" })}
                    disabled={executiveBriefingConfigLoading || executiveBriefingSaveLoading}
                  >
                    每天
                  </Button>
                </div>
              </div>
              <div className="space-y-2">
                <p className="text-sm font-medium text-slate-700 dark:text-slate-200">管理群 Chat ID</p>
                <Input
                  value={executiveBriefingConfigDraft.delivery_target_ref || ""}
                  onChange={(event) => onConfigChange({ delivery_target_ref: event.target.value || null })}
                  placeholder="oc_management_group"
                  disabled={executiveBriefingConfigLoading || executiveBriefingSaveLoading}
                />
              </div>
              <div className="space-y-2">
                <p className="text-sm font-medium text-slate-700 dark:text-slate-200">时区</p>
                <Input
                  value={executiveBriefingConfigDraft.timezone}
                  onChange={(event) => onConfigChange({ timezone: event.target.value })}
                  placeholder="Asia/Shanghai"
                  disabled={executiveBriefingConfigLoading || executiveBriefingSaveLoading}
                />
              </div>
            </div>

            <div className="mt-6 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
              <div className="space-y-1">
                {executiveBriefingConfigError && (
                  <p className="text-sm text-rose-600 dark:text-rose-300">{executiveBriefingConfigError}</p>
                )}
                {executiveBriefingSaveMessage && (
                  <p
                    className={`text-sm ${
                      executiveBriefingSaveMessage.type === "success"
                        ? "text-emerald-600 dark:text-emerald-300"
                        : "text-rose-600 dark:text-rose-300"
                    }`}
                  >
                    {executiveBriefingSaveMessage.text}
                  </p>
                )}
              </div>
              <Button onClick={onSaveConfig} disabled={executiveBriefingConfigLoading || executiveBriefingSaveLoading}>
                保存晨报配置
              </Button>
            </div>
          </CardContent>
        </Card>

        <BriefingDetailDrawer
          open={Boolean(drawerSection)}
          section={drawerSection}
          focusedProjectKey={drawerProjectKey}
          onOpenChange={(open) => {
            if (!open) {
              setDrawerSection(null);
              setDrawerProjectKey(null);
            }
          }}
          onOpenTarget={onOpenTarget}
        />
      </div>
    </TabsContent>
  );
}