import { useState, useCallback, useEffect } from 'react';
import { AppLayout } from '@/Components/Layout/AppLayout';

type Day = {
  index: number;
  date: string;
  dateJalali: string;
  dayName: string;
  isHoliday: boolean;
};

type Student = {
  id: number;
  fullName: string;
};

type Props = {
  classroom: { id: number; name: string };
  days: Day[];
  students: Student[];
  records: Record<string, Record<number, string>>; // date → student_id → status
};

type CellStatus = 'present' | 'absent' | null;
type SaveState = 'idle' | 'saving' | 'saved' | 'error';

function nextStatus(current: CellStatus): CellStatus {
  if (current === null) return 'present';
  if (current === 'present') return 'absent';
  return null;
}

export default function AttendanceSheet({ classroom, days, students, records }: Props) {
  // Initialize grid from existing records
  const initial: Record<string, Record<number, CellStatus>> = {};
  for (const day of days) {
    initial[day.date] = {};
    for (const student of students) {
      const existing = records[day.date]?.[student.id];
      initial[day.date][student.id] = (existing as CellStatus) ?? null;
    }
  }

  const [grid, setGrid] = useState(initial);
  const [saving, setSaving] = useState(false);
  const [saveState, setSaveState] = useState<SaveState>('idle');
  const [saved, setSaved] = useState(false);
  const [dirty, setDirty] = useState(false);

  useEffect(() => {
    const fresh: Record<string, Record<number, CellStatus>> = {};
    for (const day of days) {
      fresh[day.date] = {};
      for (const student of students) {
        const existing = records[day.date]?.[student.id];
        fresh[day.date][student.id] = (existing as CellStatus) ?? null;
      }
    }
    setGrid(fresh);
    setDirty(false);
    setSaved(false);
    setSaving(false);
    setSaveState('idle');
  }, [classroom.id]);

  const toggleCell = useCallback((date: string, studentId: number, isHoliday: boolean) => {
    setGrid((prev) => {
      const current = prev[date]?.[studentId] ?? null;
      return {
        ...prev,
        [date]: {
          ...prev[date],
          [studentId]: nextStatus(current),
        },
      };
    });
    setDirty(true);
    setSaved(false);
    setSaveState('idle');
  }, []);

  const handleSave = useCallback(() => {
    const recordsPayload: Array<{ student_id: number; date: string; status: CellStatus }> = [];
    for (const day of days) {
      for (const student of students) {
        const status = grid[day.date]?.[student.id] ?? null;
        recordsPayload.push({ student_id: student.id, date: day.date, status });
      }
    }

    setSaving(true);
    setSaveState('saving');
    fetch(`/teacher/attendance-sheet/${classroom.id}`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': (document.querySelector('meta[name=csrf-token]') as HTMLMetaElement)?.content ?? '',
        'Accept': 'application/json',
      },
      body: JSON.stringify({ records: recordsPayload }),
    })
      .then((res) => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return res.json();
      })
      .then((data) => {
        if (data.ok) {
          setSaving(false);
          setSaved(true);
          setDirty(false);
          setSaveState('saved');
        } else {
          throw new Error('Save failed');
        }
      })
      .catch(() => {
        setSaving(false);
        setSaveState('error');
      });
  }, [classroom.id, days, students, grid]);

  // Cell renderer
  function CellContent({ status, excused }: { status: CellStatus | 'excused'; excused?: boolean }) {
    if (status === 'excused') {
      return (
        <div style={{
          width: 32, height: 32, borderRadius: '50%', background: '#dbeafe',
          border: '2px solid #3b82f6', display: 'flex', alignItems: 'center', justifyContent: 'center',
          margin: 'auto',
        }}>
          <i className="bi bi-circle-fill" style={{ color: '#3b82f6', fontSize: 12 }} />
        </div>
      );
    }
    if (status === 'present') {
      return (
        <div style={{
          width: 32, height: 32, borderRadius: 6, background: '#dcfce7',
          border: '2px solid #16a34a', display: 'flex', alignItems: 'center', justifyContent: 'center',
          margin: 'auto',
        }}>
          <i className="bi bi-check-lg" style={{ color: '#16a34a', fontSize: 16, fontWeight: 800 }} />
        </div>
      );
    }
    if (status === 'absent') {
      return (
        <div style={{
          width: 32, height: 32, borderRadius: 6, background: '#fee2e2',
          border: '2px solid #dc2626', display: 'flex', alignItems: 'center', justifyContent: 'center',
          margin: 'auto',
        }}>
          <i className="bi bi-x-lg" style={{ color: '#dc2626', fontSize: 14, fontWeight: 800 }} />
        </div>
      );
    }
    return (
      <div style={{
        width: 32, height: 32, borderRadius: 6, background: 'transparent',
        border: '1px dashed var(--color-border)', margin: 'auto',
      }} />
    );
  }

  // Stats
  const totalAbsent = Object.values(grid).flatMap((row) => Object.values(row)).filter((s) => s === 'absent').length;
  const totalPresent = Object.values(grid).flatMap((row) => Object.values(row)).filter((s) => s === 'present').length;
  const saveLabel = saving ? 'در حال ذخیره' : saveState === 'error' ? 'ذخیره نشد' : saved && !dirty ? 'ذخیره شد' : dirty ? 'تغییرات ذخیره‌نشده' : 'آماده';
  const saveIcon = saving ? 'bi-arrow-repeat btn-spin-icon' : saveState === 'error' ? 'bi-exclamation-triangle' : saved && !dirty ? 'bi-check2-all' : dirty ? 'bi-pencil-square' : 'bi-check-circle';

  return (
    <AppLayout title={`حضور و غیاب — ${classroom.name}`}>
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2><i className="bi bi-calendar-week" /> حضور و غیاب هفتگی — {classroom.name}</h2>
            <p>
              روی هر خانه کلیک کنید: <span style={{ color: '#16a34a', fontWeight: 600 }}>✓ حاضر</span> ←{' '}
              <span style={{ color: '#dc2626', fontWeight: 600 }}>✗ غایب</span> ← خالی
            </p>
          </div>
          <div className="attendance-action-panel">
            <div className="attendance-mini-cards">
              <article className="attendance-mini-card attendance-mini-card--present">
                <i className="bi bi-check-lg" />
                <span>حاضر</span>
                <strong>{totalPresent}</strong>
              </article>
              <article className="attendance-mini-card attendance-mini-card--absent">
                <i className="bi bi-x-lg" />
                <span>غیبت</span>
                <strong>{totalAbsent}</strong>
              </article>
              <article className={`attendance-mini-card attendance-mini-card--${saveState === 'error' ? 'error' : dirty ? 'dirty' : saved ? 'saved' : 'idle'}`}>
                <i className={`bi ${saveIcon}`} />
                <span>وضعیت</span>
                <strong>{saveLabel}</strong>
              </article>
            </div>
            <div className="action-row">
            <button
              className="btn btn-primary"
              type="button"
              onClick={handleSave}
              disabled={saving || !dirty}
            >
              {saving ? <><i className="bi bi-hourglass-split" /> در حال ذخیره…</> : <><i className="bi bi-save" /> ذخیره الان</>}
            </button>
            <a className="btn btn-ghost" href="/teacher/attendance-classes">
              <i className="bi bi-arrow-right" /> بازگشت
            </a>
            </div>
          </div>
        </section>

        <div className="table-wrap" style={{ overflowX: 'auto' }}>
          <table style={{ borderCollapse: 'collapse', minWidth: '100%', tableLayout: 'auto' }}>
            <thead>
              <tr>
                <th style={thStyle}>ردیف</th>
                <th style={{ ...thStyle, minWidth: 140, textAlign: 'right' }}>نام و نام خانوادگی</th>
                {days.map((day) => (
                  <th
                    key={day.date}
                    style={{
                      ...thStyle,
                      minWidth: 80,
                      background: day.isHoliday ? '#fef3c7' : 'var(--color-surface-raised)',
                      color: day.isHoliday ? '#92400e' : undefined,
                    }}
                  >
                    <div style={{ fontSize: '0.75rem', fontWeight: 700 }}>{day.dayName}</div>
                    <div style={{ fontSize: '0.7rem', fontWeight: 400, opacity: 0.75 }}>{day.dateJalali}</div>
                    {day.isHoliday && (
                      <div style={{ fontSize: '0.65rem', color: '#b45309', marginTop: 2 }}>تعطیل</div>
                    )}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {students.map((student, rowIdx) => (
                <tr key={student.id} style={{ background: rowIdx % 2 === 0 ? 'var(--color-surface)' : 'var(--color-surface-raised)' }}>
                  <td style={{ ...tdStyle, textAlign: 'center', color: 'var(--color-text-muted)', fontSize: '0.8rem' }}>{rowIdx + 1}</td>
                  <td style={{ ...tdStyle, textAlign: 'right' }}>{student.fullName}</td>
                  {days.map((day) => {
                    const status = grid[day.date]?.[student.id] ?? null;
                    return (
                      <td
                        key={day.date}
                        style={{
                          ...tdStyle,
                          textAlign: 'center',
                          cursor: 'pointer',
                          background: day.isHoliday ? '#fffbeb' : undefined,
                          userSelect: 'none',
                        }}
                        onClick={() => toggleCell(day.date, student.id, day.isHoliday)}
                        title={`${student.fullName} — ${day.dayName} ${day.dateJalali}`}
                      >
                        <CellContent status={status} />
                      </td>
                    );
                  })}
                </tr>
              ))}
              {students.length === 0 && (
                <tr>
                  <td colSpan={2 + days.length} style={{ ...tdStyle, textAlign: 'center', color: 'var(--color-text-muted)' }}>
                    دانش‌آموزی در این کلاس ثبت نشده است.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>

        <div className="panel-card" style={{ display: 'flex', gap: 24, flexWrap: 'wrap', alignItems: 'center' }}>
          <span style={{ fontWeight: 600 }}>راهنما:</span>
          <span><CellContent status={null} /> خالی — ثبت نشده</span>
          <span><CellContent status="present" /> حاضر</span>
          <span><CellContent status="absent" /> غایب</span>
          <span>
            <div style={{ width: 32, height: 32, borderRadius: '50%', background: '#dbeafe', border: '2px solid #3b82f6', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
              <i className="bi bi-circle-fill" style={{ color: '#3b82f6', fontSize: 12 }} />
            </div>{' '}
            غیبت موجه (توسط معاون)
          </span>
        </div>
      </div>
    </AppLayout>
  );
}

const thStyle: React.CSSProperties = {
  padding: '10px 8px',
  border: '1px solid var(--color-border)',
  background: 'var(--color-surface-raised)',
  fontWeight: 700,
  fontSize: '0.8rem',
  textAlign: 'center',
  whiteSpace: 'nowrap',
};

const tdStyle: React.CSSProperties = {
  padding: '8px 6px',
  border: '1px solid var(--color-border)',
  fontSize: '0.85rem',
  verticalAlign: 'middle',
};