'use client';

import { useState } from 'react';
import { LayoutShell } from '../../../../components/layout-shell';
import { useQuery } from '@tanstack/react-query';
import api from '../../../../lib/api-client';
import clsx from 'clsx';

type MasterType = 'schools' | 'commodities' | 'suppliers';

export default function MastersPage() {
  const [activeTab, setActiveTab] = useState<MasterType>('schools');
  const [page, setPage] = useState(1);
  const PER_PAGE = 20;

  const { data, isLoading } = useQuery({
    queryKey: ['master-data', activeTab, page],
    queryFn: async () => {
      const response = await api.get(`/${activeTab}`, {
        params: { page, per_page: PER_PAGE },
      });
      return response.data;
    },
  });

  const columns = {
    schools: [
      { key: 'code', label: 'Code' },
      { key: 'name', label: 'Name' },
      { key: 'region', label: 'Region' },
      { key: 'district', label: 'District' },
    ],
    commodities: [
      { key: 'code', label: 'Code' },
      { key: 'name', label: 'Name' },
      { key: 'unit', label: 'Unit' },
    ],
    suppliers: [
      { key: 'name', label: 'Company Name' },
      { key: 'contact_person', label: 'Contact Person' },
      { key: 'phone', label: 'Phone' },
      { key: 'email', label: 'Email' },
      { key: 'address', label: 'Address' },
    ],
  };

  const total = data?.pagination?.total ?? 0;
  const totalPages = Math.ceil(total / PER_PAGE);

  return (
    <LayoutShell role="SUPER_ADMIN">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-slate-900">Master data</h1>
          <p className="text-sm text-slate-500">Manage the single source of truth for allocations.</p>
        </div>
        <div className="flex gap-2 rounded-lg bg-slate-100 p-1">
          {(['schools', 'commodities', 'suppliers'] as const).map((tab) => (
            <button
              key={tab}
              onClick={() => {
                setActiveTab(tab);
                setPage(1);
              }}
              className={clsx(
                'rounded-md px-3 py-1.5 text-sm font-medium capitalize transition',
                activeTab === tab ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700'
              )}
            >
              {tab}
            </button>
          ))}
        </div>
      </div>

      <div className="mt-6 overflow-hidden rounded-2xl border border-slate-100 bg-white shadow-sm">
        {isLoading ? (
          <div className="flex h-64 items-center justify-center">
            <div className="h-8 w-8 animate-spin rounded-full border-4 border-brand border-t-transparent"></div>
          </div>
        ) : (
          <>
            <table className="min-w-full divide-y divide-slate-100 text-sm">
              <thead className="bg-slate-50 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
                <tr>
                  {columns[activeTab].map((col) => (
                    <th key={col.key} className="px-4 py-3">{col.label}</th>
                  ))}
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                {data?.data?.length === 0 ? (
                  <tr>
                    <td colSpan={columns[activeTab].length} className="px-4 py-8 text-center text-slate-500">
                      No records found.
                    </td>
                  </tr>
                ) : (
                  data?.data?.map((row: any, i: number) => (
                    <tr key={i}>
                      {columns[activeTab].map((col) => (
                        <td key={col.key} className="px-4 py-3 text-slate-900">
                          {row[col.key]}
                        </td>
                      ))}
                    </tr>
                  ))
                )}
              </tbody>
            </table>
            <div className="flex items-center justify-between border-t border-slate-100 px-4 py-3">
              <p className="text-xs text-slate-500">
                Showing <span className="font-medium">{Math.min((page - 1) * PER_PAGE + 1, total)}</span> to{' '}
                <span className="font-medium">{Math.min(page * PER_PAGE, total)}</span> of{' '}
                <span className="font-medium">{total}</span> results
              </p>
              <div className="flex gap-2">
                <button
                  onClick={() => setPage((p) => Math.max(1, p - 1))}
                  disabled={page === 1}
                  className="rounded-lg border border-slate-200 px-3 py-1 text-xs font-semibold text-slate-600 disabled:opacity-50"
                >
                  Previous
                </button>
                <button
                  onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
                  disabled={page >= totalPages}
                  className="rounded-lg border border-slate-200 px-3 py-1 text-xs font-semibold text-slate-600 disabled:opacity-50"
                >
                  Next
                </button>
              </div>
            </div>
          </>
        )}
      </div>
    </LayoutShell>
  );
}