"use client";

import * as React from "react";
import { Bell, User as UserIcon, Users2, Loader2, Trash2 } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import { MultiSelect } from "@/components/ui/multi-select";
import { DateTimePicker } from "@/components/ui/date-time-picker";
import { DeleteConfirmationAlert } from "@/components/ui/delete-confirmation-alert";
import {
  useCreateDealReminderMutation,
  useDeleteDealReminderMutation,
} from "@/api/rtk/deals-api";
import { DealReminder } from "./types";

// Helper components usually defined in the parent file, re-implementing here or importing if possible
const SectionHeading = ({ children, icon }: { children: React.ReactNode; icon: React.ReactNode }) => (
  <h4 className="text-[12px] font-bold text-gray-500 uppercase tracking-widest flex items-center gap-2 mb-2">
    <span className="p-1.5 rounded-lg bg-gray-50 text-gray-400">{icon}</span>
    {children}
  </h4>
);

const FieldLabel = ({ children }: { children: React.ReactNode }) => (
  <label className="block text-[11px] font-bold text-gray-400 uppercase tracking-wider mb-2 ml-1">
    {children}
  </label>
);

interface DealRemindersTabProps {
  dealId: string;
  reminders: DealReminder[];
  allUsers: any[];
  /** `modal` hides section headings and uses a taller reminder list. */
  layout?: "inline" | "modal";
}

export function DealRemindersTab({
  dealId,
  reminders,
  allUsers,
  layout = "inline",
}: DealRemindersTabProps) {
  const isModal = layout === "modal";
  const [reminderText, setReminderText] = React.useState("");
  const [reminderDate, setReminderDate] = React.useState("");
  const [reminderTarget, setReminderTarget] = React.useState<"SELF" | "USERS">("SELF");
  const [selectedUserIds, setSelectedUserIds] = React.useState<string[]>([]);
  const [reminderErrors, setReminderErrors] = React.useState<{ text?: string; date?: string; users?: string }>({});
  const [deleteReminderId, setDeleteReminderId] = React.useState<string | null>(null);

  const [createReminder, { isLoading: isCreatingReminder }] = useCreateDealReminderMutation();
  const [deleteReminder, { isLoading: isDeletingReminder }] = useDeleteDealReminderMutation();

  const userOptions = React.useMemo(() => 
    allUsers.map((u: any) => ({
      label: u.name || u.email,
      value: u.id
    })), [allUsers]
  );

  const handleAddReminder = async () => {
    const errors: { text?: string; date?: string; users?: string } = {};
    if (!reminderText.trim()) errors.text = "Reminder text is required";
    if (!reminderDate) errors.date = "Date & time is required";
    if (reminderTarget === "USERS" && selectedUserIds.length === 0) errors.users = "Please select at least one user";
    
    if (Object.keys(errors).length > 0) {
      setReminderErrors(errors);
      toast.error("Please fill required fields");
      return;
    }

    if (new Date(reminderDate) < new Date()) {
      toast.error("Reminders must be set for a future time");
      return;
    }

    try {
      await createReminder({
        dealId,
        text: reminderText.trim(),
        remindAt: reminderDate,
        targetType: reminderTarget,
        targetUserIds: reminderTarget === "USERS" ? selectedUserIds : undefined,
      }).unwrap();
      
      toast.success("Reminder scheduled successfully");
      setReminderText("");
      setReminderDate("");
      setSelectedUserIds([]);
      setReminderErrors({});
    } catch (err) {
      toast.error("Failed to add reminder");
    }
  };

  const confirmDeleteReminder = async () => {
    if (!deleteReminderId) return;
    try {
      await deleteReminder({ dealId, reminderId: deleteReminderId }).unwrap();
      toast.success("Reminder removed");
      setDeleteReminderId(null);
    } catch (err) {
      toast.error("Failed to delete reminder");
    }
  };

  return (
    <div className={isModal ? "space-y-6" : "space-y-8"}>
      <section>
        {!isModal ? (
          <SectionHeading icon={<Bell size={14} />}>Add Reminder</SectionHeading>
        ) : null}
        <div className={isModal ? "grid gap-4" : "mt-4 grid gap-4"}>
          <Textarea
            placeholder="Reminder text..."
            value={reminderText}
            onChange={(e) => setReminderText(e.target.value)}
            className="bg-gray-50 border-none rounded-xl"
          />
          <div className="flex flex-wrap gap-4 items-end">
            <div className="w-full sm:w-auto">
              <FieldLabel>Date & Time</FieldLabel>
              <DateTimePicker
                value={reminderDate}
                onChange={(date) => setReminderDate(date || "")}
                min={(() => {
                  const now = new Date();
                  now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
                  return now.toISOString().slice(0, 16);
                })()}
                placeholder="Set date & time"
              />
            </div>
            <div className="flex gap-2 h-10">
              <Button
                variant={reminderTarget === "SELF" ? "default" : "secondary"}
                onClick={() => setReminderTarget("SELF")}
              >
                <UserIcon size={14} className="mr-2" />
                For me
              </Button>
              <Button
                variant={reminderTarget === "USERS" ? "default" : "secondary"}
                onClick={() => setReminderTarget("USERS")}
              >
                <Users2 size={14} className="mr-2" />
                For users
              </Button>
            </div>
            <Button
              size="relaxed"
              onClick={handleAddReminder}
              disabled={isCreatingReminder || !reminderText.trim() || !reminderDate || (reminderTarget === "USERS" && selectedUserIds.length === 0)}
            >
              {isCreatingReminder ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
              Add Reminder
            </Button>
          </div>
          {reminderTarget === "USERS" && (
            <div className="mt-2 animate-in fade-in slide-in-from-top-1 duration-200">
              <FieldLabel>Select Users</FieldLabel>
              <MultiSelect
                options={userOptions}
                value={selectedUserIds}
                onValueChange={setSelectedUserIds}
                placeholder="Assign to specific team members..."
              />
            </div>
          )}
        </div>
      </section>

      <section>
        {!isModal ? (
          <SectionHeading icon={<Bell size={14} />}>Scheduled Reminders</SectionHeading>
        ) : null}
        <div
          className={
            isModal
              ? "space-y-3"
              : "mt-4 max-h-[350px] space-y-3 overflow-y-auto pr-2 custom-scrollbar"
          }
        >
          {reminders?.length ? (
            reminders.map((r) => (
              <div
                key={r.id}
                className="flex items-center justify-between gap-3 p-4 rounded-xl bg-gray-50 border border-gray-100 group"
              >
                <div className="min-w-0 flex-1">
                  <div className="flex flex-wrap items-center gap-2">
                    <p className="text-sm font-semibold">{r.text}</p>
                    {r.targetType === "USERS" ? (
                      <Badge
                        variant="secondary"
                        className="shrink-0 border border-[#6C63FF]/25 bg-[#6C63FF]/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-[#5a52d6]"
                      >
                        Group
                      </Badge>
                    ) : null}
                    {r.isSent ? (
                      <Badge
                        variant="secondary"
                        className="shrink-0 border border-emerald-200 bg-emerald-50 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-emerald-800"
                      >
                        Send success
                      </Badge>
                    ) : null}
                  </div>
                  <div className="flex flex-wrap gap-3 mt-1 text-[11px] text-gray-400">
                    <span>
                      {new Date(r.remindAt).toLocaleString(undefined, {
                        hour12: true,
                      })}
                    </span>
                    <span>{r.targetType === "USERS" ? "→ Group" : "→ Personal"}</span>
                  </div>
                </div>
                <Button
                  variant="ghostIconTightDangerReveal"
                  onClick={() => setDeleteReminderId(r.id)}
                >
                  <Trash2 size={14} />
                </Button>
              </div>
            ))
          ) : (
            <div className="p-12 border-2 border-dashed border-gray-100 rounded-xl text-center">
              <Bell className="mx-auto text-gray-200" />
              <p className="text-sm text-gray-400 mt-2">No active reminders</p>
            </div>
          )}
        </div>
      </section>

      <DeleteConfirmationAlert
        open={!!deleteReminderId}
        onOpenChange={(o) => !o && setDeleteReminderId(null)}
        onConfirm={confirmDeleteReminder}
        title="Cancel Reminder"
        description="This will remove the reminder for all users."
        isLoading={isDeletingReminder}
      />
    </div>
  );
}