"use client";
import Link from "next/link";
import { useState } from "react";
import { CalendarClock, Check, Loader2, X, Zap } from "lucide-react";

import { api } from "@/lib/api";
import { useAuth } from "@/lib/auth";
import type { Musician, ServiceType } from "@/lib/types";
import { cn } from "@/lib/utils";

interface Props {
  musician: Musician;
  serviceTypes: ServiceType[];
  onClose: () => void;
}

export function ContratarModal({ musician, serviceTypes, onClose }: Props) {
  const { user } = useAuth();
  const [mode, setMode] = useState<"express" | "scheduled">("express");
  const [serviceType, setServiceType] = useState(musician.service_types[0] ?? "");
  const [scheduledAt, setScheduledAt] = useState("");
  const [address, setAddress] = useState("");
  const [notes, setNotes] = useState("");
  const [sending, setSending] = useState(false);
  const [done, setDone] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function submit() {
    setError(null);
    if (mode === "scheduled" && !scheduledAt) {
      setError("Elegí la fecha y hora del evento.");
      return;
    }
    setSending(true);
    try {
      await api.createBooking({
        musician_id: musician.id,
        service_type: serviceType,
        mode,
        scheduled_at: mode === "scheduled" ? new Date(scheduledAt).toISOString() : undefined,
        address: address || undefined,
        notes: notes || undefined,
      });
      setDone(true);
    } catch (e) {
      setError(e instanceof Error ? e.message : "Error al enviar el pedido");
    } finally {
      setSending(false);
    }
  }

  const input =
    "w-full rounded-xl border border-line bg-bg-card px-3 py-2.5 text-sm outline-none focus:border-accent";

  return (
    <div className="fixed inset-0 z-[2000] flex items-end justify-center bg-ink/40 p-0 backdrop-blur-sm sm:items-center sm:p-4">
      <div className="w-full max-w-md rounded-t-3xl border border-line bg-bg p-5 shadow-soft sm:rounded-3xl">
        <div className="flex items-start justify-between">
          <div>
            <h2 className="text-lg font-bold tracking-tight">Contratar</h2>
            <p className="text-sm text-ink-mute">{musician.stage_name}</p>
          </div>
          <button onClick={onClose} className="grid h-8 w-8 place-items-center rounded-lg text-ink-mute hover:bg-bg-elev">
            <X size={18} />
          </button>
        </div>

        {!user ? (
          <div className="py-6 text-center">
            <p className="text-sm text-ink-soft">Iniciá sesión para contratar a {musician.stage_name}.</p>
            <Link href="/login" className="mt-4 inline-block rounded-xl bg-accent px-5 py-2.5 font-semibold text-white">
              Entrar
            </Link>
          </div>
        ) : done ? (
          <div className="py-8 text-center">
            <div className="mx-auto grid h-14 w-14 place-items-center rounded-full bg-success/15 text-success">
              <Check size={28} />
            </div>
            <p className="mt-3 font-semibold">¡Pedido enviado!</p>
            <p className="mt-1 text-sm text-ink-soft">
              {musician.stage_name} va a recibir tu solicitud y te va a responder.
            </p>
            <button onClick={onClose} className="mt-5 rounded-xl bg-accent px-6 py-2.5 font-semibold text-white">
              Listo
            </button>
          </div>
        ) : (
          <div className="mt-4 space-y-4">
            {/* Modo */}
            <div className="grid grid-cols-2 gap-2">
              {([
                ["express", "Express", "Ahora / hoy", Zap],
                ["scheduled", "Programado", "Fecha futura", CalendarClock],
              ] as const).map(([val, title, sub, Icon]) => (
                <button
                  key={val}
                  onClick={() => setMode(val)}
                  className={cn(
                    "flex flex-col items-start gap-1 rounded-xl border p-3 text-left transition-colors",
                    mode === val ? "border-accent bg-accent/10" : "border-line bg-bg-card hover:border-accent/60",
                  )}
                >
                  <Icon size={18} className={mode === val ? "text-accent-deep" : "text-ink-mute"} />
                  <span className="text-sm font-semibold">{title}</span>
                  <span className="text-[11px] text-ink-mute">{sub}</span>
                </button>
              ))}
            </div>

            {mode === "scheduled" && (
              <div>
                <label className="mb-1.5 block text-[11px] font-semibold uppercase tracking-widest text-ink-mute">
                  Fecha y hora
                </label>
                <input type="datetime-local" className={input} value={scheduledAt}
                  onChange={(e) => setScheduledAt(e.target.value)} />
              </div>
            )}

            <div>
              <label className="mb-1.5 block text-[11px] font-semibold uppercase tracking-widest text-ink-mute">
                Servicio
              </label>
              <select className={input} value={serviceType} onChange={(e) => setServiceType(e.target.value)}>
                {musician.service_types.map((slug) => {
                  const t = serviceTypes.find((s) => s.slug === slug);
                  return <option key={slug} value={slug}>{t ? `${t.emoji} ${t.name}` : slug}</option>;
                })}
              </select>
            </div>

            <div>
              <label className="mb-1.5 block text-[11px] font-semibold uppercase tracking-widest text-ink-mute">
                Dirección del evento
              </label>
              <input className={input} value={address} onChange={(e) => setAddress(e.target.value)}
                placeholder="Dónde toca" />
            </div>

            <div>
              <label className="mb-1.5 block text-[11px] font-semibold uppercase tracking-widest text-ink-mute">
                Notas (opcional)
              </label>
              <textarea className={cn(input, "min-h-[60px]")} value={notes} onChange={(e) => setNotes(e.target.value)}
                placeholder="Detalles del evento, canciones, etc." />
            </div>

            <div className="flex items-center justify-between rounded-xl bg-bg-elev px-3 py-2.5 text-sm">
              <span className="text-ink-soft">Precio de referencia</span>
              <span className="font-bold">{musician.base_price.toLocaleString()} {musician.currency}</span>
            </div>

            {error && <p className="text-sm text-red-500">{error}</p>}

            <button onClick={submit} disabled={sending || !serviceType}
              className="flex w-full items-center justify-center gap-2 rounded-xl py-3 font-bold text-white disabled:opacity-50"
              style={{ background: "linear-gradient(120deg,#3b82f6,#1d4ed8)" }}>
              {sending && <Loader2 size={16} className="animate-spin" />}
              {mode === "express" ? "Solicitar ahora" : "Solicitar para esa fecha"}
            </button>
          </div>
        )}
      </div>
    </div>
  );
}