import * as React from 'react';

import { Panel } from './panel';

export interface RegistrationField {
  label: string;
  value: React.ReactNode;
  hint?: string;
}

export interface RegistrationSection {
  title: string;
  description: string;
  fields: RegistrationField[];
}

export interface RegistrationChecklistItem {
  label: string;
  status: 'done' | 'pending' | 'attention';
}

export interface RegistrationWorkbenchProps {
  eyebrow: string;
  title: string;
  subtitle: string;
  profile: string;
  stage: string;
  sections: RegistrationSection[];
  checklist: RegistrationChecklistItem[];
}

const statusTone: Record<RegistrationChecklistItem['status'], string> = {
  done: 'bg-emerald-100 text-emerald-700 border-emerald-200',
  pending: 'bg-amber-100 text-amber-700 border-amber-200',
  attention: 'bg-rose-100 text-rose-700 border-rose-200',
};

const statusLabel: Record<RegistrationChecklistItem['status'], string> = {
  done: 'Concluido',
  pending: 'Pendente',
  attention: 'Exige acao',
};

export function RegistrationWorkbench({
  eyebrow,
  title,
  subtitle,
  profile,
  stage,
  sections,
  checklist,
}: RegistrationWorkbenchProps) {
  return (
    <Panel title={title} eyebrow={eyebrow}>
      <div className="grid gap-5 xl:grid-cols-[1.15fr_0.85fr]">
        <div className="space-y-4">
          <div className="rounded-[1.6rem] border border-slate-200 bg-[linear-gradient(135deg,#0f172a_0%,#1e293b_58%,#334155_100%)] p-6 text-white">
            <p className="text-xs font-black uppercase tracking-[0.28em] text-amber-200">{profile}</p>
            <h3 className="mt-3 text-3xl font-black tracking-tight">{title}</h3>
            <p className="mt-3 max-w-3xl text-sm leading-7 text-slate-200">{subtitle}</p>
            <div className="mt-5 flex flex-wrap gap-2">
              <span className="rounded-full border border-white/10 bg-white/10 px-3 py-2 text-[11px] font-black uppercase tracking-[0.18em] text-white">
                Etapa: {stage}
              </span>
              <span className="rounded-full border border-emerald-300/20 bg-emerald-300/10 px-3 py-2 text-[11px] font-black uppercase tracking-[0.18em] text-emerald-100">
                Modo local ativo
              </span>
              <span className="rounded-full border border-sky-300/20 bg-sky-300/10 px-3 py-2 text-[11px] font-black uppercase tracking-[0.18em] text-sky-100">
                Persistencia pendente de API
              </span>
            </div>
          </div>

          {sections.map((section) => (
            <section key={section.title} className="rounded-[1.6rem] border border-slate-200 bg-white p-5">
              <div className="flex flex-col gap-2 lg:flex-row lg:items-start lg:justify-between">
                <div>
                  <p className="text-[11px] font-black uppercase tracking-[0.24em] text-slate-500">{section.title}</p>
                  <p className="mt-2 text-sm leading-6 text-slate-600">{section.description}</p>
                </div>
                <span className="rounded-full border border-slate-200 bg-slate-50 px-3 py-2 text-[11px] font-black uppercase tracking-[0.18em] text-slate-700">
                  {section.fields.length} campos-chave
                </span>
              </div>
              <div className="mt-5 grid gap-3 md:grid-cols-2">
                {section.fields.map((field) => (
                  <div key={field.label} className="rounded-[1.2rem] border border-slate-100 bg-slate-50 px-4 py-4">
                    <p className="text-[11px] font-black uppercase tracking-[0.18em] text-slate-500">{field.label}</p>
                    <div className="mt-2 text-sm font-semibold text-slate-900">{field.value}</div>
                    {field.hint ? <p className="mt-2 text-xs leading-5 text-slate-500">{field.hint}</p> : null}
                  </div>
                ))}
              </div>
            </section>
          ))}
        </div>

        <div className="space-y-4">
          <section className="rounded-[1.6rem] border border-slate-200 bg-white p-5">
            <p className="text-[11px] font-black uppercase tracking-[0.24em] text-slate-500">Checklist de liberacao</p>
            <div className="mt-4 space-y-3">
              {checklist.map((item) => (
                <div key={item.label} className="flex items-start gap-3 rounded-[1.1rem] border border-slate-100 bg-slate-50 px-4 py-3">
                  <span className={`rounded-full border px-3 py-1 text-[10px] font-black uppercase tracking-[0.18em] ${statusTone[item.status]}`}>
                    {statusLabel[item.status]}
                  </span>
                  <p className="text-sm leading-6 text-slate-700">{item.label}</p>
                </div>
              ))}
            </div>
          </section>

          <section className="rounded-[1.6rem] border border-amber-200 bg-amber-50 p-5">
            <p className="text-[11px] font-black uppercase tracking-[0.24em] text-amber-700">Acao recomendada</p>
            <h4 className="mt-2 text-xl font-black tracking-tight text-amber-950">Validar o onboarding completo no fluxo local.</h4>
            <p className="mt-3 text-sm leading-6 text-amber-900">
              Esta area foi desenhada para operacao Brasil: cadastro documental, PIX, geografia urbana, antifraude e jornada
              comercial de alta conversao.
            </p>
            <div className="mt-4 flex flex-wrap gap-2">
              <a href="?" className="rounded-full border border-amber-900 bg-amber-900 px-4 py-2 text-xs font-black uppercase tracking-[0.18em] text-white">
                Fechar fluxo
              </a>
              <a href="?" className="rounded-full border border-amber-300 bg-white px-4 py-2 text-xs font-black uppercase tracking-[0.18em] text-amber-900">
                Voltar para listagem
              </a>
            </div>
          </section>
        </div>
      </div>
    </Panel>
  );
}