"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { toast } from "@/components/admin/Toast";
import {
  EventOverviewCharts,
  type OverviewItem,
} from "@/components/dashboard/EventOverviewCharts";
import { PageContainer } from "@/components/layout/PageContainer";
import {
  FetchError,
  apiPost,
  formatDateShort,
  type PublicEvent,
} from "@/lib/client-api";

export function DashboardShell({
  events,
  items,
}: {
  events: PublicEvent[];
  items: OverviewItem[];
}) {
  const router = useRouter();
  const [customOpen, setCustomOpen] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [eventDate, setEventDate] = useState("");
  const [endDate, setEndDate] = useState("");
  const [location, setLocation] = useState("");

  const onCreateCustom = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      setSubmitting(true);
      const created = await apiPost<{ id: string }>(`/api/events`, {
        title,
        description,
        eventDate: eventDate ? new Date(eventDate).toISOString() : null,
        endDate: endDate ? new Date(endDate).toISOString() : null,
        location: location || null,
      });
      toast("Custom event created.", "success");
      setCustomOpen(false);
      setTitle("");
      setDescription("");
      setEventDate("");
      setEndDate("");
      setLocation("");
      router.push(`/events/${created.id}`);
      router.refresh();
    } catch (err) {
      toast(
        err instanceof FetchError ? err.message : "Failed to create event.",
        "error",
      );
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <PageContainer className="space-y-6">
      <EventOverviewCharts items={items} />

      <section>
        <div className="mb-3 flex flex-wrap items-center justify-between gap-3">
          <h2 className="text-sm font-semibold text-foreground">
            Your events ({events.length})
          </h2>
          <div className="flex gap-2">
            <Link href="/templates">
              <Button size="sm" variant="secondary">
                Browse templates
              </Button>
            </Link>
            <Button size="sm" onClick={() => setCustomOpen(true)}>
              + Custom event
            </Button>
          </div>
        </div>
        {events.length === 0 ? (
          <p className="rounded-xl border border-border bg-surface p-4 text-sm text-muted">
            No events yet. Use a template or create a custom event to get started.
          </p>
        ) : (
          <ul className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
            {events.map((ev) => (
              <li
                key={ev.id}
                className="flex flex-col rounded-2xl border border-border bg-surface p-4 shadow-sm"
              >
                <p className="text-xs uppercase tracking-wide text-muted">
                  {ev.templateSlug ?? "custom"}
                </p>
                <h3 className="mt-1 text-base font-semibold">{ev.title}</h3>
                <p className="mt-1 text-xs text-muted">
                  {ev.eventDate ? formatDateShort(ev.eventDate) : "No date"}
                  {ev.location ? ` · ${ev.location}` : ""}
                </p>
                <div className="mt-auto pt-3">
                  <Link href={`/events/${ev.id}`}>
                    <Button size="sm" variant="secondary" className="w-full">
                      Open
                    </Button>
                  </Link>
                </div>
              </li>
            ))}
          </ul>
        )}
      </section>

      {customOpen ? (
        <div className="fixed inset-0 z-50 grid place-items-center bg-black/40 p-4">
          <form
            onSubmit={onCreateCustom}
            className="w-full max-w-md rounded-2xl border border-border bg-surface p-6 shadow-lg"
          >
            <div className="flex items-center justify-between">
              <div>
                <p className="text-xs text-muted">Custom event</p>
                <h3 className="text-lg font-semibold">Create your event</h3>
              </div>
              <button
                type="button"
                onClick={() => setCustomOpen(false)}
                className="rounded-md p-1 text-muted hover:bg-surface-muted"
                aria-label="Close"
              >
                ✕
              </button>
            </div>
            <div className="mt-4 space-y-3">
              <div>
                <label className="mb-1 block text-xs font-medium text-muted">
                  Title
                </label>
                <input
                  required
                  value={title}
                  onChange={(e) => setTitle(e.target.value)}
                  className="input"
                  placeholder="My event"
                />
              </div>
              <div>
                <label className="mb-1 block text-xs font-medium text-muted">
                  Description
                </label>
                <textarea
                  value={description}
                  onChange={(e) => setDescription(e.target.value)}
                  className="input min-h-[60px]"
                  rows={2}
                />
              </div>
              <div className="grid grid-cols-2 gap-2">
                <div>
                  <label className="mb-1 block text-xs font-medium text-muted">
                    Start date
                  </label>
                  <input
                    type="datetime-local"
                    value={eventDate}
                    onChange={(e) => setEventDate(e.target.value)}
                    className="input"
                  />
                </div>
                <div>
                  <label className="mb-1 block text-xs font-medium text-muted">
                    End date
                  </label>
                  <input
                    type="datetime-local"
                    value={endDate}
                    onChange={(e) => setEndDate(e.target.value)}
                    className="input"
                  />
                </div>
              </div>
              <div>
                <label className="mb-1 block text-xs font-medium text-muted">
                  Location
                </label>
                <input
                  value={location}
                  onChange={(e) => setLocation(e.target.value)}
                  className="input"
                />
              </div>
            </div>
            <div className="mt-6 flex justify-end gap-2">
              <Button
                type="button"
                variant="secondary"
                size="sm"
                onClick={() => setCustomOpen(false)}
                disabled={submitting}
              >
                Cancel
              </Button>
              <Button type="submit" size="sm" isLoading={submitting}>
                Create event
              </Button>
            </div>
            <style jsx>{`
              :global(.input) {
                width: 100%;
                border-radius: 0.5rem;
                border: 1px solid var(--border);
                background: var(--surface);
                padding: 0.5rem 0.75rem;
                font-size: 0.875rem;
                color: var(--foreground);
              }
              :global(.input:focus) {
                outline: none;
                border-color: var(--primary);
              }
            `}</style>
          </form>
        </div>
      ) : null}
    </PageContainer>
  );
}