'use client';

import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { FiPlus, FiSave, FiTrash2 } from 'react-icons/fi';
import { saveAttendance } from '@/lib/api/audit-report-builder.api';
import type { ReportAttendee } from '@/lib/api/types/audit-report-builder.types';
import type { PanelProps } from './panelTypes';

export default function AttendancePanel({ model, canEdit, onDirty }: PanelProps) {
  const [rows, setRows] = useState<ReportAttendee[]>(() =>
    model.attendance.map((a) => ({ name: a.name, designation: a.designation ?? '', signature_path: a.signature_path ?? '' })),
  );
  const [saving, setSaving] = useState(false);

  const update = (i: number, p: Partial<ReportAttendee>) => {
    setRows((prev) => prev.map((r, idx) => (idx === i ? { ...r, ...p } : r)));
    onDirty('attendance', true);
  };
  const add = () => {
    setRows((p) => [...p, { name: '', designation: '' }]);
    onDirty('attendance', true);
  };
  const remove = (i: number) => {
    setRows((p) => p.filter((_, idx) => idx !== i));
    onDirty('attendance', true);
  };

  const save = async () => {
    const clean = rows.filter((r) => r.name.trim());
    setSaving(true);
    try {
      await saveAttendance(model.report.id, clean);
      setRows(clean);
      onDirty('attendance', false);
      toast.success('Attendance saved');
    } catch (e: any) {
      toast.error(e.message || 'Save failed');
    } finally {
      setSaving(false);
    }
  };

  return (
    <div>
      <div className="rb-card-head">
        <h3 className="rb-card-title">
          <span className="rb-card-bar" /> Opening / Closing Meeting Attendance
        </h3>
        {canEdit && (
          <button className="rb-btn rb-btn-sm" onClick={add}>
            <FiPlus size={12} /> Add Attendee
          </button>
        )}
      </div>

      <div className="rb-table-wrap">
        <table className="rb-table">
          <thead>
            <tr>
              <th style={{ width: 50 }}>#</th>
              <th>Name</th>
              <th>Designation</th>
              {canEdit && <th style={{ width: 60 }} />}
            </tr>
          </thead>
          <tbody>
            {rows.length === 0 && (
              <tr>
                <td colSpan={4}>
                  <div className="rb-empty">No attendees yet.</div>
                </td>
              </tr>
            )}
            {rows.map((r, i) => (
              <tr key={i}>
                <td style={{ color: '#9ca3af' }}>{i + 1}</td>
                <td>
                  <input className="rb-input" disabled={!canEdit} value={r.name} onChange={(e) => update(i, { name: e.target.value })} placeholder="Full name" />
                </td>
                <td>
                  <input className="rb-input" disabled={!canEdit} value={r.designation ?? ''} onChange={(e) => update(i, { designation: e.target.value })} placeholder="Designation" />
                </td>
                {canEdit && (
                  <td>
                    <button className="rb-btn rb-btn-red rb-btn-sm" onClick={() => remove(i)} title="Remove">
                      <FiTrash2 size={12} />
                    </button>
                  </td>
                )}
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {canEdit && (
        <div className="rb-savebar">
          <button className="rb-btn rb-btn-primary" onClick={save} disabled={saving}>
            <FiSave size={14} /> {saving ? 'Saving…' : 'Save Attendance'}
          </button>
        </div>
      )}
    </div>
  );
}