import React, { useEffect, useMemo, useState } from 'react';
import { Card, Button, Table } from 'react-bootstrap';
import { Link, router } from '@inertiajs/react';
import IconifyIcon from '@/components/wrappers/IconifyIcon';


type ServiceReport = {
  id: number;
  report_number: string;
  service_date: string | null;
  template: string;
  type_label?: string;
  status: string;
  compliant?: boolean;
  pdf_url?: string | null;
};

type Props = {
  accountId: number;
  reports?: ServiceReport[];
};

type SortKey = 'report_number' | 'service_date' | 'template';
type SortDir = 'asc' | 'desc';

const PER_PAGE = 5;

export default function ServiceReportsCard({ accountId, reports = [] }: Props) {
  const [sortKey, setSortKey] = useState<SortKey>('service_date');
  const [sortDir, setSortDir] = useState<SortDir>('desc');
  const [page, setPage] = useState<number>(1);
  const [showNewMenu, setShowNewMenu] = useState(false);

  const toggleSort = (key: SortKey) => {
    if (sortKey !== key) {
      setSortKey(key);
      setSortDir(key === 'service_date' ? 'desc' : 'asc');
      setPage(1);
      return;
    }

    setSortDir((prev) => (prev === 'asc' ? 'desc' : 'asc'));
    setPage(1);
  };

  const sortArrow = (key: SortKey) => {
    if (sortKey !== key) return '';
    return sortDir === 'asc' ? ' ▲' : ' ▼';
  };

  const sortedReports = useMemo(() => {
    const rows = [...reports];
    const dir = sortDir === 'asc' ? 1 : -1;

    rows.sort((a, b) => {
      if (sortKey === 'service_date') {
        const av = a.service_date ? new Date(a.service_date).getTime() : 0;
        const bv = b.service_date ? new Date(b.service_date).getTime() : 0;
        return av === bv ? 0 : av < bv ? -1 * dir : 1 * dir;
      }

      if (sortKey === 'report_number') {
        const av = String(a.report_number ?? '').toLowerCase();
        const bv = String(b.report_number ?? '').toLowerCase();
        return av.localeCompare(bv, undefined, { numeric: true }) * dir;
      }

      const av = String(a.type_label ?? a.template ?? '').toLowerCase();
      const bv = String(b.type_label ?? b.template ?? '').toLowerCase();
      return av.localeCompare(bv) * dir;
    });

    return rows;
  }, [reports, sortKey, sortDir]);

  const totalPages = Math.max(1, Math.ceil(sortedReports.length / PER_PAGE));

  useEffect(() => {
    if (page > totalPages) {
      setPage(totalPages);
    }
  }, [page, totalPages]);
  
    useEffect(() => {
      const handleClickOutside = () => setShowNewMenu(false);
      window.addEventListener('click', handleClickOutside);
    
      return () => window.removeEventListener('click', handleClickOutside);
    }, []);

  const paginatedReports = useMemo(() => {
    const start = (page - 1) * PER_PAGE;
    return sortedReports.slice(start, start + PER_PAGE);
  }, [sortedReports, page]);

  const fmtDate = (value: string | null) => value || '—';

  return (
    <Card id="account-section-service-reports" className="gd-module-card mb-4">
      <Card.Body>
        <div className="d-flex justify-content-between align-items-center mb-3">
          <h5 className="mb-0">Service Reports</h5>

            <div className="position-relative">
                <Button
                  size="sm"
                  variant="primary"
                  onClick={(e) => {
                    e.stopPropagation();
                    setShowNewMenu((prev) => !prev);
                  }}
                  className="dropdown-toggle"
                >
                  New
                </Button>
            
              {showNewMenu && (
                <div
                  className="dropdown-menu show"
                  style={{
                    position: 'absolute',
                    top: '100%',
                    right: 0,
                    zIndex: 3000,
                    minWidth: '320px',
                    display: 'block',
                  }}
                >
                  <Link
                    href={route('service-reports.create', { template: 'ke', account_id: accountId })}
                    className="dropdown-item"
                    onClick={() => setShowNewMenu(false)}
                  >
                    Kitchen Exhaust Hood Cleaning
                  </Link>
            
                  <Link
                    href={route('service-reports.create', { template: 'fs', account_id: accountId })}
                    className="dropdown-item"
                    onClick={() => setShowNewMenu(false)}
                  >
                    Fire Suppression
                  </Link>
            
                  <Link
                    href={route('service-reports.create', { template: 'gi', account_id: accountId })}
                    className="dropdown-item"
                    onClick={() => setShowNewMenu(false)}
                  >
                    Grease Interceptor
                  </Link>
            
                  <Link
                    href={route('service-reports.create', { template: 'fa', account_id: accountId })}
                    className="dropdown-item"
                    onClick={() => setShowNewMenu(false)}
                  >
                    Fire Alarm System
                  </Link>
            
                  <Link
                    href={route('service-reports.create', { template: 'pe', account_id: accountId })}
                    className="dropdown-item"
                    onClick={() => setShowNewMenu(false)}
                  >
                    Portable Extinguishers & Emergency Lights
                  </Link>
                </div>
              )}
            </div>
        </div>

        <Table hover responsive className="mb-0 align-middle service-reports-table">
          <thead>
            <tr>
              <th
                role="button"
                style={{ cursor: 'pointer' }}
                onClick={() => toggleSort('report_number')}
              >
                <span className="gd-sort-header">
                  <span>Report No.</span>
                  <span className="gd-sort-icon">{sortArrow('report_number')}</span>
                </span>
              </th>

              <th
                role="button"
                style={{ cursor: 'pointer' }}
                onClick={() => toggleSort('service_date')}
              >
                <span className="gd-sort-header">
                  <span>Date</span>
                  <span className="gd-sort-icon">{sortArrow('service_date')}</span>
                </span>
              </th>

              <th
                role="button"
                style={{ cursor: 'pointer' }}
                onClick={() => toggleSort('template')}
              >
                <span className="gd-sort-header">
                  <span>Type</span>
                  <span className="gd-sort-icon">{sortArrow('template')}</span>
                </span>
              </th>

              <th>Status</th>
              <th>Compliant</th>
              <th className="text-end">Actions</th>
            </tr>
          </thead>

          <tbody>
            {paginatedReports.length === 0 ? (
              <tr>
                <td colSpan={6} className="text-muted text-center py-3">
                  No service reports found
                </td>
              </tr>
            ) : (
              paginatedReports.map((r) => (
                <tr key={r.id}>
                  <td>
                    <div className="d-flex align-items-center gap-2">
                      {r.pdf_url ? (
                        <a
                          href={r.pdf_url}
                          target="_blank"
                          rel="noreferrer"
                          className="sr-report-link"
                          onClick={(e) => e.stopPropagation()}
                        >
                          {r.report_number}
                        </a>
                      ) : (
                        <span>{r.report_number}</span>
                      )}

                      {r.status === 'draft' && (
                        <span className="gd-badge-draft">Draft</span>
                      )}
                    </div>
                  </td>

                  <td>{fmtDate(r.service_date)}</td>
                  <td>{r.type_label ?? r.template}</td>
                  <td>{r.status}</td>

                  <td>
                    <span className={r.compliant ? 'text-success fw-bold' : 'text-danger fw-bold'}>
                      {r.compliant ? '✔' : '✘'}
                    </span>
                  </td>

                  <td className="text-end" onClick={(e) => e.stopPropagation()}>
                    <div className="d-inline-flex gap-2">
                      {r.pdf_url ? (
                        <a
                          href={r.pdf_url}
                          target="_blank"
                          rel="noreferrer"
                          className="gd-btn-icon gd-icon-lg"
                          title="View Service Report"
                          aria-label={`View service report ${r.report_number ?? r.id}`}
                          onClick={(e) => e.stopPropagation()}
                        >
                          <IconifyIcon icon="tabler:eye" />
                        </a>
                      ) : (
                        <span
                          className="gd-btn-icon gd-icon-lg opacity-50"
                          title="View unavailable"
                          aria-label="View unavailable"
                        >
                          <IconifyIcon icon="tabler:eye" />
                        </span>
                      )}

                      <Link
                        href={route('service-reports.edit', r.id)}
                        className="gd-btn-icon gd-icon-lg"
                        title="Edit Service Report"
                        aria-label={`Edit service report ${r.report_number ?? r.id}`}
                        onClick={(e) => e.stopPropagation()}
                      >
                        <IconifyIcon icon="tabler:edit" />
                      </Link>

                      <button
                        type="button"
                        className="gd-btn-icon gd-icon-lg gd-btn-icon-danger"
                        title="Delete Service Report"
                        aria-label={`Delete service report ${r.report_number ?? r.id}`}
                        onClick={(e) => {
                          e.stopPropagation();
                          if (!confirm('Delete this service report? This cannot be undone.')) return;

                          router.delete(route('service-reports.destroy', r.id), {
                            preserveScroll: true,
                          });
                        }}
                      >
                        <IconifyIcon icon="tabler:trash" />
                      </button>
                    </div>
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </Table>

        {sortedReports.length > PER_PAGE && (
          <div className="d-flex justify-content-between align-items-center flex-wrap gap-2 mt-3">
            <div className="text-muted small">
              Showing {(page - 1) * PER_PAGE + 1}–
              {Math.min(page * PER_PAGE, sortedReports.length)} of {sortedReports.length}
            </div>

            <div className="d-flex gap-2">
              <Button
                size="sm"
                variant="light"
                disabled={page <= 1}
                onClick={() => setPage((prev) => Math.max(1, prev - 1))}
              >
                Previous
              </Button>

              <div className="d-flex align-items-center px-2 small">
                Page {page} of {totalPages}
              </div>

              <Button
                size="sm"
                variant="light"
                disabled={page >= totalPages}
                onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))}
              >
                Next
              </Button>
            </div>
          </div>
        )}
      </Card.Body>
    </Card>
  );
}