import Link from 'next/link';
import type { ReactNode } from 'react';
import { ArrowLeft, Banknote, CalendarDays, Clock, MapPin } from 'lucide-react';
import { JOB_STATUS_LABELS, type JobStatus } from '@ehandyhire/shared';
import { Button } from '@/components/ui/button';
import type { BrowsePageHeroAction } from '@/components/layout/BrowsePageHero';
import { JobLocationMap } from '@/components/map/JobLocationMap';
import { formatCurrency, formatDate, cn } from '@/lib/utils';

const statusHeroStyles: Record<string, string> = {
  OPEN: 'bg-emerald-500/20 text-emerald-300 border-emerald-400/30',
  QUOTED: 'bg-amber-500/20 text-amber-300 border-amber-400/30',
  ACCEPTED: 'bg-blue-500/20 text-blue-200 border-blue-400/30',
  IN_PROGRESS: 'bg-amber-500/20 text-amber-300 border-amber-400/30',
  COMPLETED: 'bg-white/10 text-slate-300 border-white/20',
  CANCELLED: 'bg-red-500/20 text-red-300 border-red-400/30',
};

function jobStatusLabel(status?: string) {
  if (!status) return 'Job';
  return JOB_STATUS_LABELS[status as JobStatus] ?? status.replace(/_/g, ' ');
}

interface JobDetailHeroProps {
  title: string;
  category?: string;
  status?: string;
  location?: string;
  postedAt?: string;
  dateNeeded?: string | null;
  budget?: number | null;
  backHref: string;
  backLabel?: string;
  actions?: BrowsePageHeroAction[];
  extraActions?: ReactNode;
  /** Bleed hero to dashboard main edges */
  inset?: boolean;
}

export function JobDetailHero({
  title,
  category,
  status,
  location,
  postedAt,
  dateNeeded,
  budget,
  backHref,
  backLabel = 'Back to jobs',
  actions,
  extraActions,
  inset = false,
}: JobDetailHeroProps) {
  const statusStyle = statusHeroStyles[status ?? 'OPEN'] ?? statusHeroStyles.OPEN;

  return (
    <section
      className={cn(
        'bg-slate-900 text-white border-b border-slate-800',
        inset && '-mx-4 lg:-mx-8 -mt-4 lg:-mt-8'
      )}
    >
      <div className={cn('py-8 md:py-10', inset ? 'px-4 lg:px-8' : 'page-container max-w-6xl')}>
        <Link
          href={backHref}
          className="inline-flex items-center gap-1.5 text-sm text-slate-400 hover:text-white transition-colors mb-5"
        >
          <ArrowLeft className="h-4 w-4" />
          {backLabel}
        </Link>

        <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-4">
          <div className="min-w-0">
            <p className="text-xs font-semibold uppercase tracking-widest text-slate-400 mb-2">
              {category ? `${category} · Job details` : 'Job details'}
            </p>

            <div className="flex flex-wrap items-center gap-2 mb-3">
              {category && (
                <span className="inline-flex items-center rounded px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide bg-white/10 text-slate-200 border border-white/20">
                  {category}
                </span>
              )}
              {status && (
                <span
                  className={cn(
                    'inline-flex items-center rounded px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide border',
                    statusStyle
                  )}
                >
                  {jobStatusLabel(status)}
                </span>
              )}
            </div>

            <h1 className="text-2xl md:text-3xl font-bold tracking-tight leading-tight">{title}</h1>

            <div className="flex flex-wrap gap-x-4 gap-y-2 mt-3 text-sm text-slate-400">
              {location && (
                <span className="inline-flex items-center gap-1.5">
                  <MapPin className="h-4 w-4 shrink-0 text-slate-500" />
                  {location}
                </span>
              )}
              {postedAt && (
                <span className="inline-flex items-center gap-1.5">
                  <Clock className="h-4 w-4 shrink-0 text-slate-500" />
                  Posted {formatDate(postedAt)}
                </span>
              )}
              {dateNeeded && (
                <span className="inline-flex items-center gap-1.5">
                  <CalendarDays className="h-4 w-4 shrink-0 text-slate-500" />
                  Needed by {formatDate(dateNeeded)}
                </span>
              )}
              {budget != null && (
                <span className="inline-flex items-center gap-1.5 font-semibold text-emerald-400">
                  <Banknote className="h-4 w-4 shrink-0" />
                  {formatCurrency(Number(budget))}
                </span>
              )}
            </div>
          </div>

          {(actions?.length || extraActions) && (
            <div className="flex flex-wrap gap-2 shrink-0">
              {extraActions}
              {actions?.map((action) => (
                <Link key={action.href + action.label} href={action.href}>
                  <Button variant={action.variant ?? 'heroOutline'} size="sm" className="gap-1.5">
                    <action.icon className="h-4 w-4" />
                    {action.label}
                  </Button>
                </Link>
              ))}
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

interface JobDetailBodyProps {
  description: string;
  job: {
    id: string;
    title: string;
    location: string;
    latitude: number | null;
    longitude: number | null;
  };
  children?: ReactNode;
  maxWidth?: '3xl' | '4xl' | '6xl';
  inset?: boolean;
}

export function JobDetailBody({
  description,
  job,
  children,
  maxWidth = '4xl',
  inset = false,
}: JobDetailBodyProps) {
  const widthClass =
    maxWidth === '6xl' ? 'max-w-6xl' : maxWidth === '3xl' ? 'max-w-3xl' : 'max-w-4xl';

  return (
    <div
      className={cn(
        'mx-auto w-full py-6 md:py-8 space-y-6',
        widthClass,
        !inset && 'page-container'
      )}
    >
      <section className="rounded-xl border border-border bg-surface p-5 md:p-6 shadow-sm">
        <h2 className="font-bold text-slate-900 mb-3">Job description</h2>
        <p className="text-slate-600 whitespace-pre-wrap leading-relaxed">{description}</p>
      </section>

      {children}

      <section className="relative z-0 rounded-xl border border-border bg-surface p-5 md:p-6 shadow-sm">
        <JobLocationMap job={job} />
      </section>
    </div>
  );
}