import * as React from 'react';

import { Panel } from './panel';

export interface CrudStateField {
  label: string;
  value: React.ReactNode;
}

export interface CrudStatePanelProps {
  moduleLabel: string;
  mode?: string;
  targetLabel?: string;
  description?: string;
  fields?: CrudStateField[];
}

const titleByMode: Record<string, string> = {
  create: 'Novo registro',
  view: 'Visualizar detalhes',
  edit: 'Editar cadastro',
  delete: 'Excluir logicamente',
  toggle: 'Ativar ou inativar',
};

export function CrudStatePanel({
  moduleLabel,
  mode,
  targetLabel,
  description,
  fields = [],
}: CrudStatePanelProps) {
  if (!mode) {
    return null;
  }

  return (
    <Panel title={titleByMode[mode] ?? 'Operacao do cadastro'} eyebrow={moduleLabel}>
      <div className="grid gap-4 lg:grid-cols-[1.05fr_0.95fr]">
        <div className="rounded-[1.4rem] border border-slate-200 bg-slate-50 p-5">
          <p className="text-sm font-black text-slate-900">{targetLabel ?? 'Novo item'}</p>
          <p className="mt-2 text-sm leading-6 text-slate-600">
            {description ?? 'Area de trabalho preparada para conectar formulario, validacoes, historico e confirmacoes.'}
          </p>
          <div className="mt-4 flex flex-wrap gap-2">
            <a href="?" className="rounded-full border border-slate-900 bg-slate-900 px-4 py-2 text-xs font-bold uppercase tracking-[0.18em] text-white">
              Fechar
            </a>
            <a href="?" className="rounded-full border border-slate-200 bg-white px-4 py-2 text-xs font-bold uppercase tracking-[0.18em] text-slate-700">
              Voltar para listagem
            </a>
          </div>
        </div>
        <div className="rounded-[1.4rem] border border-slate-200 bg-white p-5">
          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">Dados principais</p>
          <div className="mt-4 space-y-3">
            {fields.map((field) => (
              <div key={field.label} className="rounded-[1rem] border border-slate-100 bg-slate-50 px-4 py-3">
                <p className="text-[11px] font-bold uppercase tracking-[0.18em] text-slate-500">{field.label}</p>
                <div className="mt-1 text-sm text-slate-800">{field.value}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Panel>
  );
}