import { useState, useCallback, useEffect } from 'react';
import { Link } from 'react-router-dom';
import {
  batchApi,
  type DashboardResponse,
  type DashboardStats,
  type ExecutionStatisticsDto,
} from '../api/batchApi';
import { usePoller } from '../hooks/usePoller';
import { useToastContext } from '../contexts/ToastContext';
import StatusBadge from '../components/StatusBadge';
import EmptyState from '../components/EmptyState';
import LoadingSpinner from '../components/LoadingSpinner';
import BarChart from '../components/BarChart';
import { formatDateTime, calculateDuration } from '../utils/formatters';

const POLLING_INTERVAL = 5000;

interface StatCardProps {
  label: string;
  value: number;
  gradient: string;
  to?: string;
}

function StatCard({ label, value, gradient, to }: StatCardProps) {
  const content = (
    <div
      className={`${gradient} rounded-xl shadow-md p-6 text-white
        hover:shadow-lg hover:-translate-y-0.5 transition-all cursor-pointer`}
    >
      <p className="text-3xl font-bold">{value}</p>
      <p className="text-sm mt-1 opacity-90">{label}</p>
    </div>
  );

  if (to) {
    return <Link to={to} className="no-underline">{content}</Link>;
  }
  return content;
}

export default function Dashboard() {
  const { showToast } = useToastContext();
  const [dashboard, setDashboard] = useState<DashboardResponse | null>(null);
  const [loading, setLoading] = useState(true);

  // Execute Job modal
  const [showExecuteModal, setShowExecuteModal] = useState(false);
  const [jobs, setJobs] = useState<string[]>([]);
  const [selectedJob, setSelectedJob] = useState('');
  const [executing, setExecuting] = useState(false);
  const [startDate, setStartDate] = useState('');
  const [stopDate, setStopDate] = useState('');
  const [abandoning, setAbandoning] = useState(false);
  const [statistics, setStatistics] = useState<ExecutionStatisticsDto | null>(null);

  const loadStatistics = useCallback(async () => {
    try {
      const data = await batchApi.getStatistics(30);
      setStatistics(data);
    } catch {
      /* 통계 로드 실패는 무시 */
    }
  }, []);

  useEffect(() => {
    loadStatistics();
  }, [loadStatistics]);

  const loadDashboard = useCallback(async () => {
    try {
      const data = await batchApi.getDashboard();
      setDashboard(data);
    } catch (err) {
      console.error('Dashboard load failed:', err);
    } finally {
      setLoading(false);
    }
  }, []);

  usePoller(loadDashboard, POLLING_INTERVAL);

  const handleOpenExecuteModal = async () => {
    try {
      const jobList = await batchApi.getJobs();
      setJobs(jobList);
      setSelectedJob(jobList[0] ?? '');
      setShowExecuteModal(true);
    } catch (err) {
      showToast('작업 목록을 불러올 수 없습니다.', 'error');
      console.error(err);
    }
  };

  const handleExecuteJob = async () => {
    if (!selectedJob) return;
    setExecuting(true);
    try {
      const params: Record<string, string> = {};
      if (startDate) params.startDate = startDate;
      if (stopDate) params.stopDate = stopDate;
      const result = await batchApi.executeJob(
        selectedJob,
        Object.keys(params).length > 0 ? params : undefined,
      );
      showToast(
        result.message || `${selectedJob} 실행 요청 완료`,
        'success',
      );
      setShowExecuteModal(false);
      setStartDate('');
      setStopDate('');
      await loadDashboard();
    } catch (err) {
      showToast(`실행 실패: ${err instanceof Error ? err.message : '알 수 없는 오류'}`, 'error');
    } finally {
      setExecuting(false);
    }
  };

  const handleAbandonAllStale = async () => {
    setAbandoning(true);
    try {
      const result = await batchApi.abandonAllStale();
      showToast(
        result.message || `${result.abandonedCount ?? 0}건 강제 종료 완료`,
        'success',
      );
      await loadDashboard();
    } catch (err) {
      showToast(
        `강제 종료 실패: ${err instanceof Error ? err.message : '알 수 없는 오류'}`,
        'error',
      );
    } finally {
      setAbandoning(false);
    }
  };

  if (loading) return <LoadingSpinner />;

  const stats: DashboardStats = dashboard?.stats ?? {
    totalSchedules: 0,
    activeSchedules: 0,
    inactiveSchedules: 0,
    totalJobs: 0,
  };

  const runningJobs = dashboard?.runningJobs ?? [];
  const recentExecutions = dashboard?.recentExecutions ?? [];
  const recentFailures = dashboard?.recentFailures ?? [];
  const staleExecutionCount = dashboard?.staleExecutionCount ?? 0;
  const failureStats = dashboard?.failureStats ?? { last24h: 0, last7d: 0 };

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between flex-wrap gap-3">
        <h1 className="text-2xl font-bold text-wing-text">대시보드</h1>
        <button
          onClick={handleOpenExecuteModal}
          className="px-4 py-2 bg-wing-accent text-white font-semibold rounded-lg shadow
            hover:bg-wing-accent/80 hover:shadow-lg transition-all text-sm"
        >
          작업 즉시 실행
        </button>
      </div>

      {/* F1: Stale Execution Warning Banner */}
      {staleExecutionCount > 0 && (
        <div className="flex items-center justify-between bg-amber-100 border border-amber-300 rounded-xl px-5 py-3">
          <span className="text-amber-800 font-medium text-sm">
            {staleExecutionCount}건의 오래된 실행 중 작업이 있습니다
          </span>
          <button
            onClick={handleAbandonAllStale}
            disabled={abandoning}
            className="px-4 py-1.5 text-sm font-medium text-white bg-amber-600 rounded-lg
              hover:bg-amber-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {abandoning ? '처리 중...' : '전체 강제 종료'}
          </button>
        </div>
      )}

      {/* Stats Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
        <StatCard
          label="전체 스케줄"
          value={stats.totalSchedules}
          gradient="bg-gradient-to-br from-blue-500 to-blue-600"
          to="/schedules"
        />
        <StatCard
          label="활성 스케줄"
          value={stats.activeSchedules}
          gradient="bg-gradient-to-br from-emerald-500 to-emerald-600"
        />
        <StatCard
          label="비활성 스케줄"
          value={stats.inactiveSchedules}
          gradient="bg-gradient-to-br from-amber-500 to-amber-600"
        />
        <StatCard
          label="전체 작업"
          value={stats.totalJobs}
          gradient="bg-gradient-to-br from-violet-500 to-violet-600"
          to="/jobs"
        />
        <StatCard
          label="실패 (24h)"
          value={failureStats.last24h}
          gradient="bg-gradient-to-br from-red-500 to-red-600"
        />
      </div>

      {/* Quick Navigation */}
      <div className="flex flex-wrap gap-2">
        <Link
          to="/jobs"
          className="px-3 py-1.5 bg-wing-card-alpha text-wing-text rounded-lg text-sm hover:bg-wing-hover transition-colors no-underline"
        >
          작업 관리
        </Link>
        <Link
          to="/executions"
          className="px-3 py-1.5 bg-wing-card-alpha text-wing-text rounded-lg text-sm hover:bg-wing-hover transition-colors no-underline"
        >
          실행 이력
        </Link>
        <Link
          to="/schedules"
          className="px-3 py-1.5 bg-wing-card-alpha text-wing-text rounded-lg text-sm hover:bg-wing-hover transition-colors no-underline"
        >
          스케줄 관리
        </Link>
        <Link
          to="/schedule-timeline"
          className="px-3 py-1.5 bg-wing-card-alpha text-wing-text rounded-lg text-sm hover:bg-wing-hover transition-colors no-underline"
        >
          타임라인
        </Link>
      </div>

      {/* Running Jobs */}
      <section className="bg-wing-surface rounded-xl shadow-md p-6">
        <h2 className="text-lg font-semibold text-wing-text mb-4">
          실행 중인 작업
          {runningJobs.length > 0 && (
            <span className="ml-2 text-sm font-normal text-wing-accent">
              ({runningJobs.length}건)
            </span>
          )}
        </h2>
        {runningJobs.length === 0 ? (
          <EmptyState
            icon="💤"
            message="현재 실행 중인 작업이 없습니다."
          />
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-wing-border text-left text-wing-muted">
                  <th className="pb-2 font-medium">작업명</th>
                  <th className="pb-2 font-medium">실행 ID</th>
                  <th className="pb-2 font-medium">시작 시간</th>
                  <th className="pb-2 font-medium">상태</th>
                </tr>
              </thead>
              <tbody>
                {runningJobs.map((job) => (
                  <tr key={job.executionId} className="border-b border-wing-border/50">
                    <td className="py-3 font-medium text-wing-text">{job.jobName}</td>
                    <td className="py-3 text-wing-muted">#{job.executionId}</td>
                    <td className="py-3 text-wing-muted">{formatDateTime(job.startTime)}</td>
                    <td className="py-3">
                      <StatusBadge status={job.status} />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </section>

      {/* Recent Executions */}
      <section className="bg-wing-surface rounded-xl shadow-md p-6">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-lg font-semibold text-wing-text">최근 실행 이력</h2>
          <Link
            to="/executions"
            className="text-sm text-wing-accent hover:text-wing-accent no-underline"
          >
            전체 보기 &rarr;
          </Link>
        </div>
        {recentExecutions.length === 0 ? (
          <EmptyState
            icon="📋"
            message="실행 이력이 없습니다."
            sub="작업을 실행하면 여기에 표시됩니다."
          />
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-wing-border text-left text-wing-muted">
                  <th className="pb-2 font-medium">실행 ID</th>
                  <th className="pb-2 font-medium">작업명</th>
                  <th className="pb-2 font-medium">시작 시간</th>
                  <th className="pb-2 font-medium">종료 시간</th>
                  <th className="pb-2 font-medium">소요 시간</th>
                  <th className="pb-2 font-medium">상태</th>
                </tr>
              </thead>
              <tbody>
                {recentExecutions.slice(0, 5).map((exec) => (
                  <tr key={exec.executionId} className="border-b border-wing-border/50">
                    <td className="py-3">
                      <Link
                        to={`/executions/${exec.executionId}`}
                        className="text-wing-accent hover:text-wing-accent no-underline font-medium"
                      >
                        #{exec.executionId}
                      </Link>
                    </td>
                    <td className="py-3 text-wing-text">{exec.jobName}</td>
                    <td className="py-3 text-wing-muted">{formatDateTime(exec.startTime)}</td>
                    <td className="py-3 text-wing-muted">{formatDateTime(exec.endTime)}</td>
                    <td className="py-3 text-wing-muted">
                      {calculateDuration(exec.startTime, exec.endTime)}
                    </td>
                    <td className="py-3">
                      <StatusBadge status={exec.status} />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </section>

      {/* F6: Recent Failures */}
      {recentFailures.length > 0 && (
        <section className="bg-wing-surface rounded-xl shadow-md p-6 border border-red-200">
          <h2 className="text-lg font-semibold text-red-700 mb-4">
            최근 실패 이력
            <span className="ml-2 text-sm font-normal text-red-500">
              ({recentFailures.length}건)
            </span>
          </h2>
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-red-200 text-left text-red-500">
                  <th className="pb-2 font-medium">실행 ID</th>
                  <th className="pb-2 font-medium">작업명</th>
                  <th className="pb-2 font-medium">시작 시간</th>
                  <th className="pb-2 font-medium">오류 메시지</th>
                </tr>
              </thead>
              <tbody>
                {recentFailures.map((fail) => (
                  <tr key={fail.executionId} className="border-b border-red-100">
                    <td className="py-3">
                      <Link
                        to={`/executions/${fail.executionId}`}
                        className="text-red-600 hover:text-red-800 no-underline font-medium"
                      >
                        #{fail.executionId}
                      </Link>
                    </td>
                    <td className="py-3 text-wing-text">{fail.jobName}</td>
                    <td className="py-3 text-wing-muted">{formatDateTime(fail.startTime)}</td>
                    <td className="py-3 text-wing-muted" title={fail.exitMessage ?? ''}>
                      {fail.exitMessage
                        ? fail.exitMessage.length > 50
                          ? `${fail.exitMessage.slice(0, 50)}...`
                          : fail.exitMessage
                        : '-'}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </section>
      )}

      {/* F8: Execution Statistics Chart */}
      {statistics && statistics.dailyStats.length > 0 && (
        <section className="bg-wing-surface rounded-xl shadow-md p-6">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-lg font-semibold text-wing-text">
              실행 통계 (최근 30일)
            </h2>
            <div className="flex gap-4 text-xs text-wing-muted">
              <span>
                전체 <strong className="text-wing-text">{statistics.totalExecutions}</strong>
              </span>
              <span>
                성공 <strong className="text-emerald-600">{statistics.totalSuccess}</strong>
              </span>
              <span>
                실패 <strong className="text-red-600">{statistics.totalFailed}</strong>
              </span>
            </div>
          </div>
          <BarChart
            data={statistics.dailyStats.map((d) => ({
              label: d.date.slice(5),
              values: [
                { color: 'green', value: d.successCount },
                { color: 'red', value: d.failedCount },
                { color: 'gray', value: d.otherCount },
              ],
            }))}
            height={180}
          />
          <div className="flex gap-4 mt-3 text-xs text-wing-muted justify-end">
            <span className="flex items-center gap-1">
              <span className="w-3 h-3 rounded-sm bg-emerald-500" /> 성공
            </span>
            <span className="flex items-center gap-1">
              <span className="w-3 h-3 rounded-sm bg-red-500" /> 실패
            </span>
            <span className="flex items-center gap-1">
              <span className="w-3 h-3 rounded-sm bg-gray-400" /> 기타
            </span>
          </div>
        </section>
      )}

      {/* Execute Job Modal */}
      {showExecuteModal && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-wing-overlay"
          onClick={() => setShowExecuteModal(false)}
        >
          <div
            className="bg-wing-surface rounded-xl shadow-2xl p-6 max-w-md w-full mx-4"
            onClick={(e) => e.stopPropagation()}
          >
            <h3 className="text-lg font-semibold text-wing-text mb-4">작업 즉시 실행</h3>
            <label className="block text-sm font-medium text-wing-text mb-2">
              실행할 작업 선택
            </label>
            <select
              value={selectedJob}
              onChange={(e) => setSelectedJob(e.target.value)}
              className="w-full px-3 py-2 border border-wing-border rounded-lg text-sm
                focus:ring-2 focus:ring-wing-accent focus:border-wing-accent mb-4"
            >
              {jobs.map((job) => (
                <option key={job} value={job}>{job}</option>
              ))}
            </select>

            <label className="block text-sm font-medium text-wing-text mb-1">
              시작일시 <span className="text-wing-muted font-normal">(선택)</span>
            </label>
            <input
              type="datetime-local"
              value={startDate}
              onChange={(e) => setStartDate(e.target.value)}
              className="w-full px-3 py-2 border border-wing-border rounded-lg text-sm
                focus:ring-2 focus:ring-wing-accent focus:border-wing-accent mb-3"
            />

            <label className="block text-sm font-medium text-wing-text mb-1">
              종료일시 <span className="text-wing-muted font-normal">(선택)</span>
            </label>
            <input
              type="datetime-local"
              value={stopDate}
              onChange={(e) => setStopDate(e.target.value)}
              className="w-full px-3 py-2 border border-wing-border rounded-lg text-sm
                focus:ring-2 focus:ring-wing-accent focus:border-wing-accent mb-4"
            />

            <div className="flex justify-end gap-3">
              <button
                onClick={() => setShowExecuteModal(false)}
                className="px-4 py-2 text-sm font-medium text-wing-text bg-wing-card rounded-lg
                  hover:bg-wing-hover transition-colors"
              >
                취소
              </button>
              <button
                onClick={handleExecuteJob}
                disabled={executing || !selectedJob}
                className="px-4 py-2 text-sm font-medium text-white bg-wing-accent rounded-lg
                  hover:bg-wing-accent/80 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {executing ? '실행 중...' : '실행'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}