"use client";

import { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { AlertCircle, ExternalLink, CalendarClock, Zap } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
import { PlatformSelector, getPlatform, type Platform } from "@/components/ui/platform-selector";
import { MeetingModeSelector, type MeetingMode } from "@/components/ui/meeting-mode-selector";
import { ScheduleDateTimeRange, type DateTimeRange } from "@/components/ui/schedule-datetime-range";
import { cn } from "@/lib/utils";
import { addMeeting, createScheduledMeeting } from "@/lib/api";
import { useMeetingsStore } from "@/store";
import type { AddMeetingResponseData, CreateScheduledMeetingResponseData } from "@/types/api";
import { MeetingReadyDialog } from "./meeting-ready-dialog";

// ─── URL validators (join-now only) ──────────────────────────────────────────
const urlValidators: Record<Platform, (v: string) => boolean> = {
  google_meet: (v) => /^https:\/\/meet\.google\.com\/[a-z]{3}-[a-z]{4}-[a-z]{3}$/.test(v),
  teams:       (v) => v.includes("teams.microsoft.com/l/meetup-join") || v.includes("teams.live.com/meet/"),
  zoom: (v) => /https?:\/\/([a-z0-9-]+\.)?zoom\.us\/(j|my|s|wc)\/[0-9a-zA-Z]+/.test(v),
  jitsi:       (v) => v.includes("meet.jit.si/") || v.startsWith("https://"),
};

const urlHints: Record<Platform, string> = {
  google_meet: "Format: meet.google.com/xxx-xxxx-xxx",
  teams:       "Format: teams.live.com/meet/... or teams.microsoft.com/l/meetup-join/...",
  zoom: "Format: zoom.us/j/... or app.zoom.us/wc/...",
  jitsi:       "Expected: https://meet.jit.si/your-room",
};

// ─── Schema ───────────────────────────────────────────────────────────────────
function buildSchema(platform: Platform, mode: MeetingMode) {
  return z.object({
    title: z
      .string()
      .min(3, "Title must be at least 3 characters")
      .max(100, "Title must be under 100 characters")
      .regex(/\S/, "Title cannot be only whitespace"),
    meetLink:    z.string().optional(),
    description: z.string().max(500).optional(),
  }).superRefine((data, ctx) => {
    if (mode === "now") {
      if (!data.meetLink?.trim()) {
        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "Meeting link is required", path: ["meetLink"] });
      } else if (!data.meetLink.startsWith("https://")) {
        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "Must be a valid URL", path: ["meetLink"] });
      } else if (!urlValidators[platform](data.meetLink)) {
        ctx.addIssue({ code: z.ZodIssueCode.custom, message: urlHints[platform], path: ["meetLink"] });
      }
    }
  });
}

type FormValues = { title: string; meetLink?: string; description?: string };

// ─── Sub-components ───────────────────────────────────────────────────────────
function FieldError({ message }: { message?: string }) {
  if (!message) return null;
  return (
    <p className="flex items-center gap-1.5 text-xs text-red-600 dark:text-red-400 mt-1">
      <AlertCircle className="h-3.5 w-3.5 shrink-0" />
      {message}
    </p>
  );
}

function Divider({ label }: { label: string }) {
  return (
    <div className="relative">
      <div className="absolute inset-0 flex items-center">
        <div className="w-full border-t border-gray-200 dark:border-gray-700" />
      </div>
      <div className="relative flex justify-center">
        <span className="bg-white dark:bg-gray-950 px-2 text-xs text-gray-400 dark:text-gray-500">{label}</span>
      </div>
    </div>
  );
}

// ─── Main Dialog ──────────────────────────────────────────────────────────────
interface NewMeetingDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSuccess?: (data: AddMeetingResponseData) => void;
}

export function NewMeetingDialog({ open, onOpenChange, onSuccess }: NewMeetingDialogProps) {
  const storeMeeting = useMeetingsStore((s) => s.addMeeting);

  const [readyMeeting, setReadyMeeting] = useState<AddMeetingResponseData | CreateScheduledMeetingResponseData | null>(null);
  const [platform, setPlatform] = useState<Platform>("google_meet");
  const [mode, setMode]         = useState<MeetingMode>("now");
  const [range, setRange]       = useState<DateTimeRange>({ start: null, end: null });
  const [rangeError, setRangeError] = useState<string | null>(null);

  const platformConfig = getPlatform(platform);
  const isGoogleMeet   = platform === "google_meet";

  const { register, handleSubmit, reset, setValue, formState: { errors, isSubmitting } } =
    useForm<FormValues>({
      resolver: zodResolver(buildSchema(platform, mode)),
      defaultValues: { title: "", meetLink: "", description: "" },
    });

  const handlePlatformChange = (p: Platform) => {
    setPlatform(p);
    setValue("meetLink", "");
    if (p !== "google_meet") setMode("now");
  };

  const handleModeChange = (m: MeetingMode) => {
    setMode(m);
    setRange({ start: null, end: null });
    setRangeError(null);
    setValue("description", "");
  };

  const validateRange = (): boolean => {
    if (!range.start) { setRangeError("Please select a start date and time"); return false; }
    if (!range.end)   { setRangeError("Please select an end time"); return false; }
    if (range.start <= new Date()) { setRangeError("Start time must be in the future"); return false; }
    if (range.end <= range.start)  { setRangeError("End time must be after start time"); return false; }
    setRangeError(null);
    return true;
  };

  const onValid = async (data: FormValues) => {
    if (mode === "scheduled" && !validateRange()) return;

    try {
      if (mode === "scheduled") {
        const response = await createScheduledMeeting({
          title:             data.title,
          start_time:        range.start!.toISOString(),
          end_time:          range.end!.toISOString(),
          description:       data.description ?? "",
          auto_schedule_bot: true,
        });
        if (response.success) {
          storeMeeting({
            id: String(response.data.meeting_id), title: response.data.title,
            meetLink: response.data.meet_link,   date: response.data.scheduled_at,
            duration: 0, status: "scheduled", participants: [], transcript: [],
          });
          reset(); onOpenChange(false);
        }
      } else {
        const response = await addMeeting({ title: data.title, meet_link: data.meetLink! });
        if (response.success) {
          storeMeeting({
            id: String(response.data.meeting_id), title: response.data.title,
            meetLink: response.data.meet_link,   date: new Date().toISOString(),
            duration: 0, status: "pending",
            rawStatus: response.data.status ?? "pending",
            participants: [], transcript: [],
          });
          onSuccess?.(response.data);
          reset(); onOpenChange(false);
          setReadyMeeting(response.data);
        }
      }
    } catch (err) {
      console.error(mode === "scheduled" ? "Failed to schedule meeting" : "Failed to start meeting", err);
    }
  };

  const handleClose = (val: boolean) => {
    if (!val) {
      reset();
      setPlatform("google_meet");
      setMode("now");
      setRange({ start: null, end: null });
      setRangeError(null);
    }
    onOpenChange(val);
  };

  return (
    <>
      <Dialog open={open} onOpenChange={handleClose}>
        <DialogContent className="max-w-lg">
          <DialogHeader>
            <DialogTitle>New Meeting Session</DialogTitle>
            <DialogDescription>
              Choose your platform and enter the meeting details to begin transcription.
            </DialogDescription>
          </DialogHeader>

          <form onSubmit={handleSubmit(onValid)} className="space-y-5 mt-1" noValidate>

            {/* Platform */}
            <PlatformSelector value={platform} onChange={handlePlatformChange} />

            {/* Mode — Google Meet only */}
            {isGoogleMeet && (
              <>
                <Divider label="how do you want to join?" />
                <MeetingModeSelector value={mode} onChange={handleModeChange} />
              </>
            )}

            <Divider label="meeting details" />

            {/* Title */}
            <div className="space-y-1.5">
              <Label htmlFor="title">
                Meeting Title <span className="text-red-500">*</span>
              </Label>
              <Input
                id="title"
                placeholder="e.g. Q2 Planning Session"
                className={cn(errors.title && "border-red-400 focus-visible:ring-red-400")}
                {...register("title")}
              />
              <FieldError message={errors.title?.message} />
            </div>

            {/* Meet link — join now only */}
            {mode === "now" && (
              <div className="space-y-1.5">
                <div className="flex items-center justify-between gap-2">
                  <Label htmlFor="meetLink">
                    {platformConfig.name} Link <span className="text-red-500">*</span>
                  </Label>
                  <span className="text-[10px] text-gray-400 dark:text-gray-500 shrink-0">
                    {platformConfig.urlHint}
                  </span>
                </div>
                <div className="relative">
                  <platformConfig.icon
                    size={16}
                    className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none"
                  />
                  <Input
                    id="meetLink"
                    placeholder={platformConfig.placeholder}
                    className={cn("pl-9", errors.meetLink && "border-red-400 focus-visible:ring-red-400")}
                    {...register("meetLink")}
                  />
                </div>
                <FieldError message={errors.meetLink?.message} />
              </div>
            )}

            {/* Scheduled fields */}
            {isGoogleMeet && mode === "scheduled" && (
              <>
                {/* Date & time range bar */}
                <div className="space-y-1.5">
                  <Label>
                    Date & Time <span className="text-red-500">*</span>
                  </Label>
                  <ScheduleDateTimeRange
                    value={range}
                    onChange={(r) => {
                      setRange(r);
                      if (!r.start) {
                        setRangeError("Please select a start date and time");
                      } else if (r.start <= new Date()) {
                        setRangeError("Start time must be in the future");
                      } else if (r.end && r.end <= r.start) {
                        setRangeError("End time must be after start time");
                      } else {
                        setRangeError(null);
                      }
                    }}
                    error={!!rangeError}
                  />
                  {rangeError && <FieldError message={rangeError} />}
                </div>

                {/* Description */}
                <div className="space-y-1.5">
                  <Label htmlFor="description">Description</Label>
                  <Input
                    id="description"
                    placeholder="e.g. Weekly sync with the product team"
                    {...register("description")}
                  />
                </div>
              </>
            )}

            {/* Info banner */}
            <div className="flex items-start gap-2.5 rounded-xl border border-gray-100 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/40 px-3.5 py-2.5">
              {mode === "scheduled"
                ? <CalendarClock className="h-3.5 w-3.5 text-violet-400 shrink-0 mt-0.5" />
                : <ExternalLink className="h-3.5 w-3.5 text-gray-400 shrink-0 mt-0.5" />
              }
              <p className="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">
                {mode === "scheduled"
                  ? `Our bot will automatically join your ${platformConfig.name} meeting at the scheduled time and generate a full transcript.`
                  : `Our bot will join your ${platformConfig.name} meeting immediately, record the session, and generate a full transcript.`
                }
              </p>
            </div>

            {/* Actions */}
            <div className="flex justify-end gap-2 pt-1">
              <Button type="button" variant="outline" onClick={() => handleClose(false)}>
                Cancel
              </Button>
              <Button type="submit" disabled={isSubmitting} className="gap-2">
                {isSubmitting ? (
                  <span className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" />
                ) : mode === "scheduled" ? (
                  <CalendarClock className="h-4 w-4" />
                ) : (
                  <Zap className="h-4 w-4" />
                )}
                {isSubmitting ? "Saving…" : mode === "scheduled" ? "Schedule Meeting" : "Join & Transcribe"}
              </Button>
            </div>
          </form>
        </DialogContent>
      </Dialog>

      <MeetingReadyDialog
        open={!!readyMeeting}
        onOpenChange={(val) => { if (!val) setReadyMeeting(null); }}
        meeting={readyMeeting}
      />
    </>
  );
}