import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { getStatsSummary, listInside, listVisitRequests } from '../api';
import { StatsSummary, VisitRequestView } from '../types';
import { STATUS_CLASS, STATUS_LABEL, formatDateTime } from '../status';

export const DashboardPage: React.FC = () => {
  const [items, setItems] = useState<VisitRequestView[]>([]);
  const [stats, setStats] = useState<StatsSummary | null>(null);
  const [insideIds, setInsideIds] = useState<Set<number>>(new Set());
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    getStatsSummary().then(setStats).catch(() => setStats(null));
    // currently-inside visits → show "재실중" instead of the plain approved status
    listInside()
      .then((rows) => setInsideIds(new Set(rows.map((r) => r.visitRequestId))))
      .catch(() => setInsideIds(new Set()));
    listVisitRequests()
      .then(setItems)
      .catch((e) => setError(e instanceof Error ? e.message : '조회 실패'))
      .finally(() => setLoading(false));
  }, []);

  const recent = items.slice(0, 8);

  return (
    <div>
      <div className="page-head">
        <h2>대시보드</h2>
        <Link className="btn-primary" to="/visit-requests/new">+ 출입 신청</Link>
      </div>

      {error && <div className="alert alert-error">{error}</div>}

      <div className="stat-grid">
        <StatCard label="오늘 출입 예정" value={stats?.todayVisits ?? 0} accent="blue" />
        <StatCard label="현재 재실" value={stats?.currentlyInside ?? 0} accent="green" />
        <StatCard label="승인 대기" value={stats?.pending ?? 0} accent="amber" />
        <StatCard label="전체 신청" value={stats?.total ?? 0} accent="gray" />
      </div>

      <div className="card">
        <h3>최근 출입 신청</h3>
        {loading ? (
          <p className="muted">불러오는 중…</p>
        ) : recent.length === 0 ? (
          <p className="muted">신청 내역이 없습니다.</p>
        ) : (
          <table className="table">
            <thead>
              <tr>
                <th>방문자</th><th>회사</th><th>출입구역</th><th>출입 일시</th><th>상태</th>
              </tr>
            </thead>
            <tbody>
              {recent.map((r) => (
                <tr key={r.id}>
                  <td>{r.visitorName}</td>
                  <td>{r.company || '-'}</td>
                  <td>{r.zoneName || '-'}</td>
                  <td>{formatDateTime(r.visitFrom)}</td>
                  <td>
                    {insideIds.has(r.id) ? (
                      <span className="badge badge-green">재실중</span>
                    ) : (
                      <span className={`badge badge-${STATUS_CLASS[r.status]}`}>{STATUS_LABEL[r.status]}</span>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
};

const StatCard: React.FC<{ label: string; value: number; accent: string }> = ({ label, value, accent }) => (
  <div className={`stat-card accent-${accent}`}>
    <div className="stat-value">{value}</div>
    <div className="stat-label">{label}</div>
  </div>
);