'use client';

import * as ActionIcons from './Icons';

import { useState } from 'react';
import { requestCredential } from '@/app/actions';
import { SubmitButton } from './Actions';

const year = new Date().getFullYear();
type Field = { name: string; label: string; type?: 'text' | 'number' | 'url'; required?: boolean; placeholder?: string };

const KINDS: Record<string, { label: string; fields: Field[]; proof: string }> = {
  license: {
    label: 'Licence / bar admission',
    proof: 'Licence certificate, bar card or a link to the official register entry.',
    fields: [
      { name: 'jurisdiction', label: 'Jurisdiction', required: true, placeholder: 'e.g. New York' },
      { name: 'issuingBody', label: 'Issuing body', required: true, placeholder: 'e.g. New York State Unified Court System' },
      { name: 'licenseNumber', label: 'Licence number', required: true },
      { name: 'admittedYear', label: 'Year admitted', type: 'number' },
    ],
  },
  education: {
    label: 'Education',
    proof: 'Diploma or transcript.',
    fields: [
      { name: 'institution', label: 'Institution', required: true },
      { name: 'degree', label: 'Degree', required: true, placeholder: 'e.g. JD, LLB, LLM' },
      { name: 'graduationYear', label: 'Graduation year', type: 'number' },
    ],
  },
  award: {
    label: 'Award or recognition',
    proof: 'Award letter or a link to the published list. Awards you paid to enter score zero in rankings.',
    fields: [
      { name: 'name', label: 'Award', required: true },
      { name: 'issuer', label: 'Issuer', required: true },
      { name: 'year', label: 'Year', type: 'number', required: true },
    ],
  },
  track_record: {
    label: 'Court matter / track record',
    proof: 'A public source only (published judgment or court record) — never confidential client information.',
    fields: [
      { name: 'title', label: 'Matter', required: true, placeholder: 'Case name or citation' },
      { name: 'forum', label: 'Court or forum' },
      { name: 'year', label: 'Year', type: 'number', required: true },
      { name: 'sourceUrl', label: 'Public source link', type: 'url', placeholder: 'https://' },
    ],
  },
};

export function CredentialRequestForm() {
  const [kind, setKind] = useState('license');
  const k = KINDS[kind]!;
  return (
    <form action={requestCredential} className="grid gap-4 p-5 text-sm">
      <label className="block">
        <span className="field-label"><ActionIcons.LayersIcon />What do you want to add?</span>
        <select name="kind" value={kind} onChange={(e) => setKind(e.target.value)} className="field">
          {Object.entries(KINDS).map(([v, x]) => (
            <option key={v} value={v}>
              {x.label}
            </option>
          ))}
        </select>
      </label>
      <div className="grid gap-4 sm:grid-cols-2" key={kind}>
        {k.fields.map((f) => (
          <label key={f.name} className="block">
            <span className="field-label">
              {f.label}
              {!f.required && <span className="font-normal text-muted"> (optional)</span>}
            </span>
            <input
              name={f.name}
              type={f.type ?? 'text'}
              required={f.required}
              placeholder={f.placeholder}
              {...(f.type === 'number' ? { min: 1900, max: year } : { maxLength: f.type === 'url' ? 500 : 255 })}
              className="field"
            />
          </label>
        ))}
      </div>
      <label className="block">
        <span className="field-label"><ActionIcons.UploadIcon />Proof (PDF, JPG or PNG, up to 10 MB)</span>
        <input name="file" type="file" accept="application/pdf,image/jpeg,image/png" className="field" />
        <span className="mt-1 block text-xs text-muted">{k.proof} Only our verification team can see it.</span>
      </label>
      <div>
        <SubmitButton pendingLabel="Sending…"><ActionIcons.ShieldCheckIcon />Send for verification</SubmitButton>
      </div>
    </form>
  );
}