"use client";

import { useState } from "react";
import { ArrowRight, CalendarHeart } from "lucide-react";

import { Button } from "@/components/ui/button";
import { NotdienstForm } from "./notdienst-form";

type NotdienstEntryProps = {
  hasAnyAvailability: boolean;
  targetYear: number;
  targetMonth: number;
  isLocked: boolean;
  requiredDaysTotal: number;
  initialSelectedDates: string[];
  childrenIds: string[];
};

export function NotdienstEntry({
  hasAnyAvailability,
  targetYear,
  targetMonth,
  isLocked,
  requiredDaysTotal,
  initialSelectedDates,
  childrenIds,
}: NotdienstEntryProps) {
  const [showForm, setShowForm] = useState(hasAnyAvailability);

  if (!showForm) {
    return (
      <div className="flex min-h-[420px] items-center justify-center rounded-lg border border-dashed bg-gradient-to-b from-emerald-50/70 to-background p-8 text-center">
        <div className="mx-auto max-w-lg">
          <div className="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-emerald-100 text-emerald-700 shadow-sm">
            <CalendarHeart className="h-10 w-10" />
          </div>
          <h2 className="mt-6 text-2xl font-semibold tracking-tight">
            Willkommen beim Notdienst!
          </h2>
          <p className="mt-3 text-sm leading-6 text-muted-foreground">
            Es sieht so aus, als hättest du noch keine Termine eingetragen.
          </p>
          <Button
            type="button"
            className="mt-6"
            onClick={() => setShowForm(true)}
          >
            Jetzt erste Pflicht-Termine eintragen
            <ArrowRight className="h-4 w-4" />
          </Button>
        </div>
      </div>
    );
  }

  return (
    <NotdienstForm
      targetYear={targetYear}
      targetMonth={targetMonth}
      isLocked={isLocked}
      requiredDaysTotal={requiredDaysTotal}
      initialSelectedDates={initialSelectedDates}
      childrenIds={childrenIds}
    />
  );
}
