import React, { useEffect, useState } from "react";
import { Page } from "../lib/types";
import { fetchDashboardSummary, DashboardSummary } from "../lib/api";

interface Props { onNavigate: (page: Page) => void; }

export function HomePage({ onNavigate }: Props) {
  const [dash, setDash] = useState<DashboardSummary | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchDashboardSummary().then(d => { setDash(d); setLoading(false); }).catch(() => setLoading(false));
  }, []);

  if (loading) return <div><h1 className="page-title">🌊 欢迎回家</h1><p style={{color:"#999"}}>加载中...</p></div>;
  if (!dash) return <div><h1 className="page-title">🌊 欢迎回家</h1><p style={{color:"#999"}}>无法连接频道仓库</p></div>;

  return <div>
    <h1 className="page-title">🌊 欢迎回到你的初始化频道</h1>

    <div className="card" style={{background: "var(--bg2)"}}>
      <div style={{display:"flex",alignItems:"center",gap:"0.75rem",marginBottom:"0.75rem"}}>
        <span style={{width:10,height:10,borderRadius:"50%",background:dash.repoConnected?"var(--su)":"var(--da)",display:"inline-block"}}/>
        <span style={{fontWeight:600}}>频道管家 · {dash.stewardName}</span>
        <span style={{fontSize:"0.75rem",color:"var(--t2)"}}>{dash.stewardId} · {dash.stewardStatus}</span>
      </div>
      <div style={{fontSize:"0.85rem",color:"var(--t2)"}}>
        上次同步：{dash.lastSync} · 永久记忆：{dash.hasMemoryPackage ? "✅ 已启用" : "⚠️ 未检测到"} · 仓库：{dash.repoConnected ? "✅ 已连接" : "❌ 未连接"}
      </div>
    </div>

    <div className="stats" style={{gridTemplateColumns:"repeat(3,1fr)"}}>
      <div className="stat-card">
        <div className="stat-value">{dash.receiptCount}</div>
        <div className="stat-label">全部回执</div>
      </div>
      <div className="stat-card">
        <div className="stat-value">{dash.completedWorkOrders}</div>
        <div className="stat-label">已完成</div>
      </div>
      <div className="stat-card">
        <div className="stat-value">{dash.activeWorkOrders}</div>
        <div className="stat-label">进行中</div>
      </div>
    </div>

    <h2 style={{fontSize:"1.1rem",marginBottom:"0.75rem"}}>快捷入口</h2>
    <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:"0.75rem",marginBottom:"1.5rem"}}>
      <div className="card" style={{cursor:"pointer"}} onClick={() => onNavigate("plan")}>
        <div style={{fontSize:"1.2rem",marginBottom:"0.25rem"}}>📋</div>
        <div style={{fontWeight:600,fontSize:"0.95rem"}}>工单面板</div>
        <div style={{fontSize:"0.8rem",color:"var(--t2)"}}>创建 · 追踪 · 闭环</div>
      </div>
      <div className="card" style={{cursor:"pointer"}} onClick={() => onNavigate("settings")}>
        <div style={{fontSize:"1.2rem",marginBottom:"0.25rem"}}>📦</div>
        <div style={{fontWeight:600,fontSize:"0.95rem"}}>模块商店</div>
        <div style={{fontSize:"0.8rem",color:"var(--t2)"}}>浏览 · 安装 · 管理</div>
      </div>
      <div className="card" style={{cursor:"pointer"}} onClick={() => onNavigate("settings")}>
        <div style={{fontSize:"1.2rem",marginBottom:"0.25rem"}}>🧠</div>
        <div style={{fontWeight:600,fontSize:"0.95rem"}}>记忆健康</div>
        <div style={{fontSize:"0.8rem",color:"var(--t2)"}}>模型可换 · 记忆不丢</div>
      </div>
    </div>

    <h2 style={{fontSize:"1.1rem",marginBottom:"0.75rem"}}>最近回执</h2>
    {dash.recentReceipts.map(r => (
      <div className="card" key={r.id}>
        <div className="card-header">
          <div className="card-title">{r.id}</div>
          <span className={`badge ${r.result==="success"?"badge-success":"badge-warning"}`}>{r.result==="success"?"✅":"⚠️"}</span>
        </div>
        <div style={{fontSize:"0.85rem",color:"var(--t2)"}}>{r.operation} · {r.operator}</div>
        <div style={{fontSize:"0.75rem",color:"var(--t2)",marginTop:"0.25rem"}}>{r.timestamp}</div>
      </div>
    ))}
    <button className="btn" onClick={() => onNavigate("receipt")} style={{marginTop:"0.5rem"}}>查看全部回执 →</button>
  </div>;
}