'use client';

import Link from 'next/link';
import {
  ArrowRight,
  BadgeCheck,
  Briefcase,
  Handshake,
  MessageCircle,
  Search,
  Star,
  Users,
  Wrench,
} from 'lucide-react';
import { AuthShell } from '@/components/auth/AuthShell';
import { useLanguage } from '@/contexts/LanguageContext';
import { cn } from '@/lib/utils';

function RoleCard({
  href,
  icon: Icon,
  eyebrow,
  title,
  description,
  bullets,
  cta,
}: {
  href: string;
  icon: typeof Users;
  eyebrow: string;
  title: string;
  description: string;
  bullets: { icon: typeof Search; text: string }[];
  cta: string;
}) {
  return (
    <Link
      href={href}
      className="group flex h-full flex-col border border-[#e2ddd2] bg-white p-5 transition-colors hover:border-[var(--home-amber)]/55 hover:bg-[#fffdf9] sm:p-6"
    >
      <div className="flex items-start justify-between gap-3">
        <span className="flex h-11 w-11 shrink-0 items-center justify-center bg-[var(--home-ink)] text-white transition-colors group-hover:bg-[var(--home-amber)]">
          <Icon className="h-5 w-5" />
        </span>
        <ArrowRight className="mt-1 h-5 w-5 shrink-0 text-[#c4bdb0] transition-transform group-hover:translate-x-0.5 group-hover:text-[var(--home-amber)]" />
      </div>

      <p className="mt-4 text-[10px] font-semibold uppercase tracking-[0.14em] text-[var(--home-amber)]">
        {eyebrow}
      </p>
      <h2 className="home-display mt-1 text-xl font-bold text-[var(--home-ink)]">{title}</h2>
      <p className="mt-2 text-sm leading-relaxed text-muted">{description}</p>

      <ul className="mt-4 flex-1 space-y-2.5 border-t border-[#ebe6db] pt-4">
        {bullets.map((item) => (
          <li key={item.text} className="flex items-start gap-2.5 text-sm text-slate-600">
            <item.icon className="mt-0.5 h-4 w-4 shrink-0 text-[var(--home-amber)]" />
            <span>{item.text}</span>
          </li>
        ))}
      </ul>

      <span className="mt-5 inline-flex items-center gap-1.5 text-sm font-bold text-[var(--home-ink)] group-hover:text-[var(--home-amber)]">
        {cta}
        <ArrowRight className="h-4 w-4" />
      </span>
    </Link>
  );
}

export default function RegisterPage() {
  const { t } = useLanguage();

  return (
    <AuthShell
      wide
      title={t('Create your account', 'Gumawa ng account')}
      subtitle={t(
        'Choose how you will use eHandyHire. You can browse workers as a customer or list your services as a worker.',
        'Piliin kung paano mo gagamitin ang eHandyHire. Puwede kang mag-hire bilang customer o mag-alok ng serbisyo bilang worker.'
      )}
      bodyClassName="!bg-[#fffdf9]"
    >
      <div className="mx-auto max-w-3xl space-y-6">
        <div className="grid gap-4 md:grid-cols-2">
          <RoleCard
            href="/register/customer"
            icon={Users}
            eyebrow={t('For customers', 'Para sa customers')}
            title={t('I need to hire', 'Kailangan kong mag-hire')}
            description={t(
              'Find verified workers, save favorites, message them, and send hire invitations.',
              'Maghanap ng verified workers, mag-save ng favorites, mag-message, at magpadala ng hire invitations.'
            )}
            bullets={[
              {
                icon: Search,
                text: t('Browse workers by trade and area', 'Mag-browse ng workers ayon sa trade at lugar'),
              },
              {
                icon: MessageCircle,
                text: t('Message workers before you hire', 'Mag-message sa workers bago mag-hire'),
              },
              {
                icon: Handshake,
                text: t('Send hire invitations when ready', 'Magpadala ng hire invitation kapag handa na'),
              },
            ]}
            cta={t('Continue as customer', 'Magpatuloy bilang customer')}
          />

          <RoleCard
            href="/register/worker"
            icon={Wrench}
            eyebrow={t('For workers', 'Para sa workers')}
            title={t('I offer services', 'Nag-aalok ako ng serbisyo')}
            description={t(
              'Build your profile, set your rates, get verified, and reach customers looking for your trade.',
              'Gumawa ng profile, magtakda ng rates, magpa-verify, at maabot ang customers na naghahanap ng trade mo.'
            )}
            bullets={[
              {
                icon: Briefcase,
                text: t('List skills, rates, and service areas', 'Ilagay ang skills, rates, at service areas'),
              },
              {
                icon: BadgeCheck,
                text: t('Get verified to appear in search', 'Magpa-verify para lumabas sa search'),
              },
              {
                icon: Star,
                text: t('Earn reviews and grow your reputation', 'Kumita ng reviews at palaguin ang reputasyon'),
              },
            ]}
            cta={t('Continue as worker', 'Magpatuloy bilang worker')}
          />
        </div>

        <div
          className={cn(
            'border border-[#e2ddd2] bg-white px-4 py-4 text-center sm:px-5',
            'text-sm text-muted'
          )}
        >
          <p>
            {t('Already have an account?', 'May account ka na?')}{' '}
            <Link href="/login" className="auth-link">
              {t('Sign in', 'Mag-sign in')}
            </Link>
          </p>
          <p className="mt-2 text-xs leading-relaxed">
            {t(
              'Each account type has its own portal. Pick the one that matches how you plan to use eHandyHire.',
              'May sariling portal ang bawat account type. Piliin ang tugma sa kung paano mo gagamitin ang eHandyHire.'
            )}
          </p>
        </div>
      </div>
    </AuthShell>
  );
}