import { useState } from 'react';
import { Link, Navigate, useParams } from 'react-router-dom';
import { CheckCircle2, FileText, Phone } from 'lucide-react';
import { getServiceBySlug, SITE } from '../data/content';
import { Button, LinkButton } from '../components/ui/Button';
import { FadeIn } from '../components/ui/Motion';
import { ServiceIcon } from '../components/ui/ServiceIcon';
import { ReferralFormModal } from '../components/tools/ReferralFormModal';

export function ServiceDetailPage() {
  const { slug } = useParams<{ slug: string }>();
  const service = slug ? getServiceBySlug(slug) : undefined;
  const [referralOpen, setReferralOpen] = useState(false);

  if (!service) return <Navigate to="/services" replace />;

  const displayHighlights = service.highlights && service.highlights.length > 0
    ? service.highlights
    : [
        'Tailored to your NDIS plan goals and daily preferences',
        'Delivered by vetted, compassionate, and experienced staff',
        'Flexible scheduling across Metropolitan and Regional Victoria',
        'Regular progress reviews with you, your family, and support coordinator',
      ];

  return (
    <>
      <section
        className="border-b border-theme px-4 py-16 md:py-24"
        style={{ background: 'var(--color-hero-gradient)' }}
      >
        <div className="mx-auto max-w-4xl">
          <FadeIn>
            <Link to="/services" className="text-xs font-bold uppercase tracking-wider text-primary hover:underline flex items-center gap-1">
              ← Back to All Services
            </Link>
            <div className="mt-6 flex flex-col md:flex-row items-start gap-5">
              <span className="flex h-20 w-20 shrink-0 items-center justify-center rounded-3xl bg-[color-mix(in_srgb,var(--color-primary)_15%,transparent)] text-primary shadow-inner">
                <ServiceIcon name={service.icon} className="h-10 w-10" />
              </span>
              <div>
                <div className="flex flex-wrap items-center gap-2 mb-2">
                  <span className="rounded-full bg-primary/10 px-3 py-1 text-xs font-bold uppercase tracking-wider text-primary">
                    {service.categoryLabel}
                  </span>
                  {service.ndisItemCode && (
                    <span className="rounded-full bg-surface border border-theme px-3 py-1 text-xs font-mono text-muted">
                      NDIS Line Code: {service.ndisItemCode}
                    </span>
                  )}
                </div>
                <h1 className="font-[family-name:var(--font-display)] text-3xl font-bold md:text-5xl text-[var(--color-text)]">
                  {service.title}
                </h1>
                <p className="mt-2 text-sm md:text-base text-muted">{service.short}</p>
              </div>
            </div>
          </FadeIn>
        </div>
      </section>

      <section className="px-4 py-16">
        <div className="mx-auto grid max-w-5xl gap-10 lg:grid-cols-3">
          <FadeIn className="lg:col-span-2 space-y-6">
            <div className="space-y-4 text-muted leading-relaxed text-base">
              <p>{service.description}</p>
              <p>
                At Embrace HomeCare, we work directly with you, your family, or your Support Coordinator to design care delivery that fits your routine, cultural background, and NDIS plan outcomes.
              </p>
              <p>
                Whether you are <strong>NDIA Agency-Managed</strong>, <strong>Plan-Managed</strong>, or <strong>Self-Managed</strong>, our care specialists guide you through service agreements with 100% pricing transparency.
              </p>
            </div>

            <h2 className="text-xl font-bold text-[var(--color-text)] pt-4 border-t border-theme">
              What You Can Expect With Embrace
            </h2>
            <ul className="grid gap-3 sm:grid-cols-2">
              {displayHighlights.map((item) => (
                <li key={item} className="flex gap-2.5 rounded-2xl border border-theme bg-surface p-4 text-xs font-medium text-[var(--color-text)] shadow-sm">
                  <CheckCircle2 className="h-4 w-4 shrink-0 text-primary mt-0.5" />
                  <span>{item}</span>
                </li>
              ))}
            </ul>

            <div className="rounded-3xl border border-theme bg-[var(--color-bg-alt)] p-6 space-y-3">
              <h3 className="font-bold text-base text-[var(--color-text)]">How Funding Works For This Support</h3>
              <p className="text-xs text-muted leading-relaxed">
                This service is claimed under your NDIS <strong>{service.categoryLabel}</strong> budget. All pricing strictly follows the official NDIS Pricing Arrangements (Price Guide). No hidden out-of-pocket fees.
              </p>
            </div>
          </FadeIn>

          <FadeIn delay={0.1}>
            <div className="sticky top-28 space-y-4">
              <div className="rounded-3xl border border-theme bg-[var(--color-surface)] p-6 shadow-xl space-y-4">
                <h3 className="font-bold text-lg text-[var(--color-text)]">Book This Service</h3>
                <p className="text-xs text-muted">
                  Schedule a complimentary consultation with an intake specialist to get started.
                </p>

                <LinkButton to="/contact#book" className="w-full justify-center">
                  Book A Consultant
                </LinkButton>

                <Button
                  onClick={() => setReferralOpen(true)}
                  variant="outline"
                  className="w-full justify-center text-xs gap-1.5"
                >
                  <FileText className="h-4 w-4 text-primary" /> Refer A Participant
                </Button>
              </div>

              <div className="rounded-3xl border border-theme bg-[var(--color-bg)] p-5 text-xs text-muted space-y-2">
                <p className="font-bold text-[var(--color-text)] flex items-center gap-1.5">
                  <Phone className="h-4 w-4 text-primary" /> Questions? Call Us Directly
                </p>
                <p>Speak to our intake team at <a href={`tel:${SITE.phone.replace(/\s/g, '')}`} className="font-semibold text-primary">{SITE.phone}</a></p>
                <p className="text-[11px]">24/7 Helpline: {SITE.emergencyNumber}</p>
              </div>
            </div>
          </FadeIn>
        </div>
      </section>

      <ReferralFormModal isOpen={referralOpen} onClose={() => setReferralOpen(false)} />
    </>
  );
}