import { router } from '@inertiajs/react';
import { AppLayout } from '@/Components/Layout/AppLayout';
import { PageHeader } from '@/Components/UI/PageHeader';
import { EmptyState } from '@/Components/UI/EmptyState';
import { persianDigits } from '@/lib/persianDate';

type ContactRequest = {
  id: number;
  schoolName: string;
  managerName: string;
  mobile: string;
  city: string | null;
  message: string | null;
  status: 'new' | 'contacted' | 'closed';
  createdAt: string;
};

export default function ContactRequests({ requests }: { requests: ContactRequest[] }) {
  const remove = (request: ContactRequest) => {
    if (!confirm(`حذف درخواست «${request.schoolName}»؟`)) return;
    router.delete(`/super-admin/contact-requests/${request.id}`, { preserveScroll: true });
  };

  const approve = (request: ContactRequest) => {
    router.put(`/super-admin/contact-requests/${request.id}/approve`, {}, { preserveScroll: true });
  };

  return (
    <AppLayout title="درخواست‌های تماس">
      <div className="page-stack">
        <PageHeader
          title="درخواست‌های تماس و دمو"
          icon="bi-telephone-inbound"
          description="مدارسی که از طریق فرم تماس سایت درخواست دمو یا مشاوره داده‌اند. با آن‌ها تماس بگیرید و بعد از پیگیری، درخواست را حذف کنید."
        />

        {requests.length === 0 ? (
          <div className="panel-card">
            <EmptyState
              icon="bi-telephone-x"
              title="درخواستی ثبت نشده"
              description="وقتی مدرسه‌ای فرم «درخواست دمو» سایت را پر کند، اینجا نمایش داده می‌شود."
            />
          </div>
        ) : (
          <div className="table-wrap">
            <table className="data-table">
              <thead>
                <tr>
                  <th>وضعیت</th>
                  <th>مدرسه</th>
                  <th>نام مدیر</th>
                  <th>موبایل</th>
                  <th>شهر</th>
                  <th>پیام</th>
                  <th>زمان ثبت</th>
                  <th>عملیات</th>
                </tr>
              </thead>
              <tbody>
                {requests.map((request) => (
                  <tr key={request.id}>
                    <td>
                      {request.status === 'new' && <span className="badge badge-warning">جدید</span>}
                      {request.status === 'contacted' && <span className="badge badge-success">تایید شده</span>}
                      {request.status === 'closed' && <span className="badge badge-muted">بسته</span>}
                    </td>
                    <td style={{ fontWeight: 700 }}>{request.schoolName}</td>
                    <td>{request.managerName}</td>
                    <td style={{ direction: 'ltr', textAlign: 'right' }}>{persianDigits(request.mobile)}</td>
                    <td>{request.city ?? '—'}</td>
                    <td style={{ maxWidth: 280, color: 'var(--color-text-muted)', fontSize: '0.85rem' }}>
                      {request.message ?? '—'}
                    </td>
                    <td style={{ whiteSpace: 'nowrap', fontSize: '0.85rem' }}>{request.createdAt}</td>
                    <td>
                      <span className="action-row--compact">
                        {request.status === 'new' && (
                          <button type="button" className="btn btn-soft btn-sm" onClick={() => approve(request)}>
                            <i className="bi bi-check2-circle" /> تایید
                          </button>
                        )}
                        <button type="button" className="btn btn-danger-ghost btn-sm" onClick={() => remove(request)}>
                          <i className="bi bi-trash" /> حذف
                        </button>
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </AppLayout>
  );
}