import { Calculator, CheckCircle2, Send } from 'lucide-react';
import { useState } from 'react';
import { NDIS_ESTIMATOR_ITEMS } from '../../data/content';
import { Button } from '../ui/Button';

export function NdisEstimator() {
  const [selectedHours, setSelectedHours] = useState<Record<string, number>>(() => {
    const initial: Record<string, number> = {};
    NDIS_ESTIMATOR_ITEMS.forEach((item) => {
      initial[item.id] = item.defaultHours;
    });
    return initial;
  });

  const [requestSent, setRequestSent] = useState(false);
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  function updateHours(id: string, delta: number) {
    setSelectedHours((prev) => {
      const current = prev[id] || 0;
      const updated = Math.max(0, Math.min(40, current + delta));
      return { ...prev, [id]: updated };
    });
  }

  const weeklyCost = NDIS_ESTIMATOR_ITEMS.reduce((total, item) => {
    const qty = selectedHours[item.id] || 0;
    if (item.isFlatRate) {
      return total + (qty * item.hourlyRate) / 4.33; // Average weeks per month
    }
    return total + qty * item.hourlyRate;
  }, 0);

  const annualCost = weeklyCost * 52;

  function handleRequestSubmit(e: React.FormEvent) {
    e.preventDefault();
    setRequestSent(true);
  }

  return (
    <div id="estimator" className="scroll-mt-28 rounded-3xl border border-theme bg-[var(--color-surface)] p-6 md:p-8 shadow-xl">
      <div className="flex flex-wrap items-center justify-between gap-4 border-b border-theme pb-6">
        <div>
          <span className="inline-flex items-center gap-1.5 rounded-full bg-[color-mix(in_srgb,var(--color-primary)_12%,transparent)] px-3 py-1 text-xs font-bold uppercase tracking-wider text-primary">
            <Calculator className="h-3.5 w-3.5 text-primary" /> Interactive Tool
          </span>
          <h2 className="mt-2 font-[family-name:var(--font-display)] text-2xl md:text-3xl font-bold text-[var(--color-text)]">
            NDIS Support Budget Estimator
          </h2>
          <p className="mt-1 text-sm text-muted">
            Adjust support hours below to calculate estimated weekly & annual NDIS funding usage.
          </p>
        </div>

        <div className="rounded-2xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-secondary)] p-4 text-white shadow-lg">
          <p className="text-xs uppercase tracking-widest font-semibold text-white/80">Est. Weekly Budget</p>
          <p className="text-3xl font-extrabold">${Math.round(weeklyCost).toLocaleString()} <span className="text-xs font-medium text-white/80">/ week</span></p>
          <p className="text-[11px] text-white/80 mt-1">~${Math.round(annualCost).toLocaleString()} / year (52 weeks)</p>
        </div>
      </div>

      {/* Grid of Items */}
      <div className="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {NDIS_ESTIMATOR_ITEMS.map((item) => {
          const qty = selectedHours[item.id] || 0;
          const lineTotal = item.isFlatRate ? qty * item.hourlyRate : qty * item.hourlyRate * 52 / 52;

          return (
            <div
              key={item.id}
              className={`flex flex-col justify-between rounded-2xl border p-4 transition-all ${
                qty > 0
                  ? 'border-[var(--color-primary)] bg-[color-mix(in_srgb,var(--color-primary)_4%,transparent)] shadow-sm'
                  : 'border-theme opacity-80'
              }`}
            >
              <div>
                <div className="flex items-center justify-between">
                  <span className="text-[10px] font-bold uppercase tracking-wider text-primary">
                    {item.category}
                  </span>
                  <span className="text-xs font-semibold text-muted">
                    ${item.hourlyRate.toFixed(2)} / {item.unit || 'hr'}
                  </span>
                </div>
                <h3 className="mt-1 font-bold text-sm text-[var(--color-text)]">{item.title}</h3>
                <p className="mt-1 text-xs text-muted leading-relaxed line-clamp-2">{item.description}</p>
              </div>

              <div className="mt-4 flex items-center justify-between border-t border-theme pt-3">
                <div className="flex items-center gap-2">
                  <button
                    type="button"
                    onClick={() => updateHours(item.id, -1)}
                    className="flex h-8 w-8 items-center justify-center rounded-lg border border-theme bg-[var(--color-bg)] font-bold text-sm hover:bg-[color-mix(in_srgb,var(--color-primary)_12%,transparent)]"
                    aria-label="Decrease hours"
                  >
                    -
                  </button>
                  <span className="w-12 text-center text-sm font-bold">
                    {qty} <span className="text-[10px] font-normal text-muted">{item.unit || 'hrs/wk'}</span>
                  </span>
                  <button
                    type="button"
                    onClick={() => updateHours(item.id, 1)}
                    className="flex h-8 w-8 items-center justify-center rounded-lg border border-theme bg-[var(--color-bg)] font-bold text-sm hover:bg-[color-mix(in_srgb,var(--color-primary)_12%,transparent)]"
                    aria-label="Increase hours"
                  >
                    +
                  </button>
                </div>
                <div className="text-right">
                  <p className="text-xs font-bold text-[var(--color-text)]">${Math.round(lineTotal).toLocaleString()}/wk</p>
                </div>
              </div>
            </div>
          );
        })}
      </div>

      {/* Summary Box & Lead Submission */}
      <div className="mt-8 rounded-2xl border border-theme bg-[var(--color-bg)] p-6">
        {requestSent ? (
          <div className="text-center py-4">
            <CheckCircle2 className="mx-auto h-10 w-10 text-primary" />
            <h4 className="mt-2 text-lg font-bold">Proposal Request Received!</h4>
            <p className="mt-1 text-sm text-muted">
              Thank you {name}. We will email your estimated plan breakdown to <strong className="text-primary">{email}</strong> within 1 business day.
            </p>
          </div>
        ) : (
          <form onSubmit={handleRequestSubmit} className="grid gap-4 md:grid-cols-3 items-end">
            <div className="md:col-span-1">
              <label className="block text-xs font-semibold text-[var(--color-text)] mb-1">
                Your Full Name
              </label>
              <input
                type="text"
                required
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="e.g. Alex Johnson"
                className="w-full rounded-xl border border-theme bg-[var(--color-surface)] px-3.5 py-2 text-sm outline-none focus:border-primary"
              />
            </div>
            <div className="md:col-span-1">
              <label className="block text-xs font-semibold text-[var(--color-text)] mb-1">
                Email Address
              </label>
              <input
                type="email"
                required
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="e.g. alex@example.com"
                className="w-full rounded-xl border border-theme bg-[var(--color-surface)] px-3.5 py-2 text-sm outline-none focus:border-primary"
              />
            </div>
            <div className="md:col-span-1 flex gap-2">
              <Button type="submit" className="w-full justify-center">
                <Send className="h-4 w-4" /> Request Official Proposal
              </Button>
            </div>
          </form>
        )}
      </div>
    </div>
  );
}