import { CalendarDays, CheckCircle2, Clock3, Flag, FolderKanban, ListChecks, TimerReset } from 'lucide-react';
import { formatJalaliDate } from '../utils/date';
import PwaSprintProgress from './PwaSprintProgress';

const statusLabels = {
  active: 'فعال',
  planning: 'برنامه‌ریزی',
  planned: 'برنامه‌ریزی',
  completed: 'تکمیل‌شده',
  done: 'تکمیل‌شده',
  canceled: 'لغوشده',
  cancelled: 'لغوشده',
};

export default function PwaSprintSummaryCard({ sprint }) {
  const counts = sprint?.task_counts || {};
  const remaining = sprint?.remaining_days;
  const remainingLabel = remaining === null || remaining === undefined
    ? 'نامشخص'
    : remaining < 0
      ? `${Math.abs(Math.round(remaining)).toLocaleString('fa-IR')} روز گذشته`
      : `${Math.round(remaining).toLocaleString('fa-IR')} روز`;

  return (
    <section className="pwa-sprint-summary-card">
      <div className="pwa-sprint-summary-head">
        <span><TimerReset size={17} /> {statusLabels[sprint?.status] || sprint?.status || 'نامشخص'}</span>
        <h2>{sprint?.title || 'اسپرینت'}</h2>
        <p><FolderKanban size={15} /> {sprint?.project?.title || 'بدون پروژه'}</p>
      </div>

      <PwaSprintProgress value={sprint?.progress} />

      <div className="pwa-sprint-summary-grid">
        <Info icon={CalendarDays} label="شروع" value={formatJalaliDate(sprint?.start_date, 'نامشخص')} />
        <Info icon={Flag} label="پایان" value={formatJalaliDate(sprint?.end_date, 'نامشخص')} />
        <Info icon={Clock3} label="باقی‌مانده" value={remainingLabel} />
        <Info icon={ListChecks} label="کل تسک‌ها" value={(counts.total || 0).toLocaleString('fa-IR')} />
        <Info icon={CheckCircle2} label="انجام‌شده" value={(counts.done || 0).toLocaleString('fa-IR')} />
        <Info icon={TimerReset} label="عقب‌افتاده" value={(counts.overdue || 0).toLocaleString('fa-IR')} />
      </div>
    </section>
  );
}

function Info({ icon: Icon, label, value }) {
  return (
    <div>
      <Icon size={15} />
      <span>{label}</span>
      <strong>{value}</strong>
    </div>
  );
}
