export default function PageHeader({ description }) {
  return description ? <p className="page-desc mb-4">{description}</p> : null;
}

export function FormCard({ title, editMode, onSubmit, children, footer }) {
  return (
    <form onSubmit={onSubmit} className="form-card">
      <div className="mb-3 flex items-center justify-between border-b border-gray-100 pb-2">
        <h3 className="text-sm font-semibold text-gray-800">{title}</h3>
        {editMode && (
          <span className="rounded-md bg-amber-50 px-2 py-0.5 text-[10px] font-semibold text-amber-700">Editing</span>
        )}
      </div>
      <div className="space-y-3">{children}</div>
      {footer && <div className="mt-4 flex gap-2 border-t border-gray-100 pt-3">{footer}</div>}
    </form>
  );
}

export function Field({ label, children }) {
  return (
    <div>
      <label className="mb-1 block text-xs font-medium text-gray-600">{label}</label>
      {children}
    </div>
  );
}

export function Alert({ type, message }) {
  if (!message) return null;
  const cls = type === 'success'
    ? 'border-green-200 bg-green-50 text-green-700'
    : 'border-red-200 bg-red-50 text-red-700';
  return (
    <div className={`rounded-lg border px-3 py-2 text-xs ${cls}`}>{message}</div>
  );
}

export function DataTable({ title, count, columns, data, onEdit, onDelete }) {
  return (
    <div className="table-card">
      <div className="flex items-center justify-between border-b border-gray-100 bg-gray-50/80 px-4 py-2.5">
        <h3 className="text-sm font-semibold text-gray-800">{title}</h3>
        <span className="rounded-full bg-white px-2 py-0.5 text-[10px] font-medium text-gray-500 shadow-sm">
          {count}
        </span>
      </div>
      <div className="overflow-x-auto">
        <table className="min-w-full text-left text-xs">
          <thead>
            <tr className="border-b border-gray-100 bg-white text-gray-500">
              {columns.map((col) => (
                <th key={col.key} className="px-4 py-2 font-semibold">{col.label}</th>
              ))}
              {(onEdit || onDelete) && <th className="px-4 py-2 text-right font-semibold">Actions</th>}
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-50">
            {data.map((row) => (
              <tr key={row._id} className="hover:bg-gray-50/80">
                {columns.map((col) => (
                  <td key={col.key} className="whitespace-nowrap px-4 py-2.5 text-gray-700">
                    {col.format ? col.format(row[col.key], row) : (
                      <span className={col.bold ? 'font-semibold text-gray-900' : ''}>{row[col.key]}</span>
                    )}
                  </td>
                ))}
                {(onEdit || onDelete) && (
                  <td className="px-4 py-2.5 text-right">
                    <div className="flex justify-end gap-1.5">
                      {onEdit && (
                        <button type="button" onClick={() => onEdit(row)} className="btn-primary !py-1 !px-2.5">
                          Edit
                        </button>
                      )}
                      {onDelete && (
                        <button type="button" onClick={() => onDelete(row)} className="rounded-lg bg-red-50 px-2.5 py-1 text-[10px] font-semibold text-red-600 hover:bg-red-100">
                          Delete
                        </button>
                      )}
                    </div>
                  </td>
                )}
              </tr>
            ))}
            {data.length === 0 && (
              <tr>
                <td colSpan={columns.length + (onEdit || onDelete ? 1 : 0)} className="px-4 py-8 text-center text-gray-400">
                  No records found
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}

export function StatusPill({ status }) {
  const colors = {
    Pending: 'bg-amber-50 text-amber-700',
    'In Transit': 'bg-sky-50 text-sky-700',
    Delivered: 'bg-green-50 text-green-700',
    Cancelled: 'bg-red-50 text-red-700',
    Scheduled: 'bg-violet-50 text-violet-700',
    'In Progress': 'bg-blue-50 text-blue-700',
    Completed: 'bg-green-50 text-green-700',
    Failed: 'bg-red-50 text-red-700',
  };
  return (
    <span className={`rounded-full px-2 py-0.5 text-[10px] font-semibold ${colors[status] || 'bg-gray-50 text-gray-600'}`}>
      {status}
    </span>
  );
}
