'use client';

import { Fragment, type ReactNode } from 'react';
import Link from 'next/link';
import { ArrowLeft, CheckCircle2, type LucideIcon } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { LogoIcon } from '@/components/brand/LogoIcon';
import { cn } from '@/lib/utils';
import { t as translate } from '@/lib/registerLang';

export type RegisterLang = 'en' | 'tl';

export type RegisterStepDef = {
  key: string;
  label: string;
  labelTl: string;
  num: number;
};

export function RegisterFormShell({
  roleLabel,
  title,
  subtitle,
  backHref = '/register',
  backLabel,
  lang,
  stepIndicator,
  children,
}: {
  roleLabel: string;
  title: string;
  subtitle: string;
  backHref?: string;
  backLabel: string;
  lang: RegisterLang;
  stepIndicator?: ReactNode;
  children: ReactNode;
}) {
  return (
    <div className="register-worker-page">
      <div className="auth-panel">
        <div className="auth-hero !py-5 sm:!py-7">
          <div className="auth-hero-inner">
            <p className="auth-hero-brand !mb-2">{roleLabel}</p>
            <div className="auth-hero-mark mx-auto mb-2.5 h-11 w-11 bg-transparent md:mb-3 md:h-12 md:w-12">
              <LogoIcon className="h-full w-full text-[var(--home-amber)]" />
            </div>
            <h1 className="auth-hero-title !text-xl sm:!text-2xl">{title}</h1>
            <p className="auth-hero-subtitle mx-auto mt-1.5 max-w-xl !text-sm">{subtitle}</p>
          </div>
        </div>

        <div className="auth-body !bg-[#fffdf9] p-4 sm:p-6 md:p-8">
          <Link
            href={backHref}
            className="mb-4 inline-flex items-center gap-1.5 text-sm font-medium text-muted transition-colors hover:text-[var(--home-amber)]"
          >
            <ArrowLeft className="h-4 w-4" />
            {backLabel}
          </Link>
          {stepIndicator}
          {children}
        </div>
      </div>
    </div>
  );
}

export function RegisterStepIndicator({
  steps,
  current,
  lang,
}: {
  steps: RegisterStepDef[];
  current: string;
  lang: RegisterLang;
}) {
  const currentIdx = steps.findIndex((s) => s.key === current);
  const progress = ((currentIdx + 1) / steps.length) * 100;

  return (
    <div className="mb-6">
      <div className="mb-3 flex items-center justify-between gap-3">
        <p className="text-xs font-semibold uppercase tracking-wide text-muted">
          {lang === 'tl' ? 'Hakbang' : 'Step'}{' '}
          <span className="tabular-nums text-slate-900">
            {currentIdx + 1}/{steps.length}
          </span>
        </p>
        <p className="home-display text-sm font-bold text-slate-900">
          {lang === 'tl' ? steps[currentIdx]?.labelTl : steps[currentIdx]?.label}
        </p>
      </div>

      <div className="mb-4 h-1.5 w-full overflow-hidden bg-[var(--home-sand)]">
        <div
          className="h-full bg-[var(--home-amber)] transition-all duration-300"
          style={{ width: `${progress}%` }}
        />
      </div>

      <div className="flex w-full items-center">
        {steps.map((step, idx) => {
          const isActive = idx === currentIdx;
          const isDone = idx < currentIdx;
          const connectorDone = idx > 0 && idx <= currentIdx;

          return (
            <Fragment key={step.key}>
              {idx > 0 && (
                <div
                  className={cn(
                    'mx-0.5 h-px min-w-2 flex-1 sm:mx-1.5',
                    connectorDone ? 'bg-[var(--home-amber)]' : 'bg-[#e2ddd2]'
                  )}
                />
              )}
              <div className="flex min-w-[2.25rem] shrink-0 flex-col items-center gap-1 sm:min-w-[3.25rem]">
                <div
                  className={cn(
                    'auth-step-dot',
                    isDone && 'auth-step-dot-done',
                    isActive && 'auth-step-dot-active',
                    !isDone && !isActive && 'auth-step-dot-idle'
                  )}
                >
                  {isDone ? <CheckCircle2 className="h-3.5 w-3.5 sm:h-4 sm:w-4" /> : step.num}
                </div>
                <span
                  className={cn(
                    'hidden max-w-[4.5rem] text-center text-[10px] font-semibold leading-tight sm:block',
                    isActive ? 'text-slate-900' : 'text-muted'
                  )}
                >
                  {lang === 'tl' ? step.labelTl : step.label}
                </span>
              </div>
            </Fragment>
          );
        })}
      </div>
    </div>
  );
}

export function RegisterFormPanel({ children, className }: { children: ReactNode; className?: string }) {
  return (
    <div className={cn('border border-[#e2ddd2] bg-white divide-y divide-[#ebe6db]', className)}>
      {children}
    </div>
  );
}

export function RegisterFormSection({
  title,
  description,
  icon: Icon,
  eyebrow,
  children,
  className,
}: {
  title: string;
  description?: string;
  icon?: LucideIcon;
  eyebrow?: string;
  children: ReactNode;
  className?: string;
}) {
  return (
    <section className={cn('px-4 py-5 sm:px-6 sm:py-6', className)}>
      <div className="mb-4 flex items-start gap-3">
        {Icon ? (
          <span className="flex h-9 w-9 shrink-0 items-center justify-center bg-[var(--home-ink)] text-white">
            <Icon className="h-4 w-4" />
          </span>
        ) : null}
        <div className="min-w-0 flex-1">
          {eyebrow ? (
            <p className="text-[10px] font-semibold uppercase tracking-[0.14em] text-[var(--home-amber)]">
              {eyebrow}
            </p>
          ) : null}
          <h2 className="home-display mt-0.5 text-base font-bold text-[var(--home-ink)] sm:text-lg">
            {title}
          </h2>
          {description ? (
            <p className="mt-1 text-sm leading-relaxed text-muted">{description}</p>
          ) : null}
        </div>
      </div>
      <div className="space-y-4">{children}</div>
    </section>
  );
}

export function RegisterFieldGroup({
  label,
  children,
  className,
}: {
  label?: string;
  children: ReactNode;
  className?: string;
}) {
  return (
    <div className={cn('space-y-3', className)}>
      {label ? (
        <p className="text-xs font-semibold uppercase tracking-[0.08em] text-slate-500">{label}</p>
      ) : null}
      {children}
    </div>
  );
}

export function RegisterFieldGrid({ children }: { children: ReactNode }) {
  return <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4">{children}</div>;
}

export function RegisterGoogleBanner({
  email,
  onClear,
  clearLabel,
  connectedLabel,
  hint,
}: {
  email: string;
  onClear: () => void;
  clearLabel: string;
  connectedLabel: string;
  hint: string;
}) {
  return (
    <div className="flex flex-col gap-3 bg-emerald-50/80 px-4 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-6">
      <div className="flex min-w-0 gap-3">
        <span className="flex h-10 w-10 shrink-0 items-center justify-center bg-emerald-600 text-white">
          <CheckCircle2 className="h-5 w-5" />
        </span>
        <div className="min-w-0">
          <p className="text-sm font-semibold text-slate-900">{connectedLabel}</p>
          <p className="truncate text-xs text-muted">{email}</p>
          <p className="mt-0.5 text-xs leading-relaxed text-muted">{hint}</p>
        </div>
      </div>
      <Button
        type="button"
        variant="outline"
        size="sm"
        className="shrink-0 rounded-none border-[#d6d0c4]"
        onClick={onClear}
      >
        {clearLabel}
      </Button>
    </div>
  );
}

export function RegisterInfoCallout({
  icon: Icon,
  children,
}: {
  icon: LucideIcon;
  children: ReactNode;
}) {
  return (
    <div className="flex gap-3 bg-[var(--home-sand)]/50 px-4 py-4 sm:px-6">
      <span className="flex h-9 w-9 shrink-0 items-center justify-center bg-[var(--home-ink)] text-white">
        <Icon className="h-4 w-4" />
      </span>
      <div className="text-sm leading-relaxed text-slate-600">{children}</div>
    </div>
  );
}

export function RegisterSummaryCard({
  eyebrow,
  title,
  description,
}: {
  eyebrow: string;
  title: string;
  description: string;
}) {
  return (
    <div className="border border-[#e2ddd2] bg-white px-4 py-4 sm:px-5">
      <p className="text-[10px] font-semibold uppercase tracking-[0.14em] text-[var(--home-amber)]">
        {eyebrow}
      </p>
      <p className="mt-1 text-sm font-semibold text-slate-900">{title}</p>
      <p className="mt-1 text-xs leading-relaxed text-muted">{description}</p>
    </div>
  );
}

export function RegisterFormError({ message }: { message: string }) {
  return (
    <div className="border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{message}</div>
  );
}

export function RegisterStepActions({
  onBack,
  children,
  lang,
}: {
  onBack?: () => void;
  children: ReactNode;
  lang: RegisterLang;
}) {
  return (
    <div className="flex flex-col-reverse gap-2 border-t border-[#e2ddd2] bg-[var(--home-sand)]/35 px-4 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-6">
      {onBack ? (
        <Button
          type="button"
          variant="outline"
          onClick={onBack}
          className="gap-2 rounded-none border-[#d6d0c4] sm:shrink-0"
        >
          <ArrowLeft className="h-4 w-4" />
          {translate(lang, 'Back', 'Bumalik')}
        </Button>
      ) : (
        <span className="hidden sm:block" />
      )}
      <div className="flex w-full flex-col gap-2 sm:ml-auto sm:w-auto sm:flex-row sm:items-center sm:justify-end">
        {children}
      </div>
    </div>
  );
}

export function RegisterFormFooter({ children }: { children: ReactNode }) {
  return (
    <div className="mt-4 space-y-2 border-t border-[#e2ddd2] pt-4 text-center text-sm text-muted">
      {children}
    </div>
  );
}

export function RegisterTermsSection({
  id,
  lang,
  role,
  accepted,
  onChange,
  error,
}: {
  id: string;
  lang: RegisterLang;
  role: 'customer' | 'worker';
  accepted: boolean;
  onChange: (checked: boolean) => void;
  error?: string;
}) {
  const workerEn =
    'I understand I am an independent worker, and that eHandyHire may use the information I submit (including profile and verification data) to operate the platform and show my profile to customers.';
  const workerTl =
    'Nauunawaan kong independent worker ako, at puwedeng gamitin ng eHandyHire ang impormasyong isusumite ko (kasama ang profile at verification data) para patakbuhin ang platform at ipakita ang profile ko sa customers.';
  const customerEn =
    'I understand that workers on eHandyHire are independent, and that eHandyHire may use the information I submit (including account and verification data) to operate the platform and connect me with workers.';
  const customerTl =
    'Nauunawaan kong independent ang workers sa eHandyHire, at puwedeng gamitin ng eHandyHire ang impormasyong isusumite ko (kasama ang account at verification data) para patakbuhin ang platform at iugnay ako sa workers.';

  return (
    <>
      <label
        htmlFor={id}
        className={cn(
          'flex cursor-pointer items-start gap-3 border px-4 py-3.5 transition-colors',
          accepted
            ? 'border-[var(--home-amber)]/40 bg-[var(--home-sand)]'
            : 'border-[#e2ddd2] bg-[#fffdf9] hover:bg-[var(--home-sand)]/60',
          error && !accepted && 'border-[var(--home-amber)] ring-2 ring-[var(--home-amber)]/25'
        )}
      >
        <input
          id={id}
          type="checkbox"
          checked={accepted}
          onChange={(e) => onChange(e.target.checked)}
          className="mt-0.5 h-4 w-4 shrink-0 border-[#d6d0c4] text-[var(--home-amber)] focus:ring-[var(--home-amber)]/30"
        />
        <span className="text-sm leading-relaxed text-slate-700">
          {lang === 'en' ? (
            <>
              I have read and agree to the{' '}
              <Link
                href="/terms"
                target="_blank"
                className="font-semibold text-[var(--home-amber)] hover:text-[var(--home-amber-soft)]"
                onClick={(e) => e.stopPropagation()}
              >
                Terms & Conditions
              </Link>{' '}
              and{' '}
              <Link
                href="/disclaimer"
                target="_blank"
                className="font-semibold text-[var(--home-amber)] hover:text-[var(--home-amber-soft)]"
                onClick={(e) => e.stopPropagation()}
              >
                Disclaimer
              </Link>
              . {role === 'worker' ? workerEn : customerEn}
            </>
          ) : (
            <>
              Nabasa ko at sumasang-ayon ako sa{' '}
              <Link
                href="/terms"
                target="_blank"
                className="font-semibold text-[var(--home-amber)] hover:text-[var(--home-amber-soft)]"
                onClick={(e) => e.stopPropagation()}
              >
                Terms & Conditions
              </Link>{' '}
              at{' '}
              <Link
                href="/disclaimer"
                target="_blank"
                className="font-semibold text-[var(--home-amber)] hover:text-[var(--home-amber-soft)]"
                onClick={(e) => e.stopPropagation()}
              >
                Disclaimer
              </Link>
              . {role === 'worker' ? workerTl : customerTl}
            </>
          )}
        </span>
      </label>
      {error ? <p className="text-sm font-medium text-[var(--home-amber)]">{error}</p> : null}
    </>
  );
}