"use client";

import { useEffect, useState } from "react";
import {
  getReminders,
  createReminder,
  deleteReminder,
  completeReminder,
  Reminder,
} from "@/lib/api";
import { Bell, Plus, Trash2, X, Check, Clock, BellOff } from "lucide-react";

export function Reminders() {
  const [reminders, setReminders] = useState<Reminder[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [showForm, setShowForm] = useState(false);
  const [text, setText] = useState("");
  const [remindAt, setRemindAt] = useState("");
  const [saving, setSaving] = useState(false);

  const loadReminders = () => {
    setLoading(true);
    setError("");
    getReminders()
      .then((data) => setReminders(Array.isArray(data) ? data : []))
      .catch((err) => {
        console.error("Failed to load reminders:", err);
        setError("Failed to load reminders");
      })
      .finally(() => setLoading(false));
  };

  useEffect(() => {
    loadReminders();
  }, []);

  const handleCreate = () => {
    if (!text.trim() || !remindAt) return;
    setSaving(true);
    createReminder({
      text: text.trim(),
      remind_at: new Date(remindAt).toISOString(),
    })
      .then((newReminder) => {
        setReminders((prev) => [...prev, newReminder]);
        setText("");
        setRemindAt("");
        setShowForm(false);
      })
      .catch((err) => {
        console.error("Failed to create reminder:", err);
        setError("Failed to create reminder");
      })
      .finally(() => setSaving(false));
  };

  const handleComplete = (id: string) => {
    completeReminder(id)
      .then(() => {
        setReminders((prev) =>
          prev.map((r) => (r.id === id ? { ...r, completed: true } : r))
        );
      })
      .catch((err) => console.error("Failed to complete reminder:", err));
  };

  const handleDelete = (id: string) => {
    deleteReminder(id)
      .then(() => {
        setReminders((prev) => prev.filter((r) => r.id !== id));
      })
      .catch((err) => console.error("Failed to delete reminder:", err));
  };

  const formatDate = (dateStr: string) => {
    try {
      return new Date(dateStr).toLocaleString("en-US", {
        month: "short",
        day: "numeric",
        hour: "2-digit",
        minute: "2-digit",
      });
    } catch {
      return dateStr;
    }
  };

  const pending = reminders.filter((r) => !r.completed);
  const completed = reminders.filter((r) => r.completed);

  return (
    <div className="space-y-3">
      {/* Header */}
      <div className="flex items-center justify-between">
        <h4 className="text-xs font-semibold text-gray-500 uppercase flex items-center gap-1.5">
          <Bell size={14} />
          Reminders ({pending.length} pending)
        </h4>
        <button
          onClick={() => setShowForm(!showForm)}
          className="p-1 rounded text-gray-400 hover:text-slack-purple hover:bg-gray-100 transition-colors"
        >
          {showForm ? <X size={14} /> : <Plus size={14} />}
        </button>
      </div>

      {/* Form */}
      {showForm && (
        <div className="p-3 rounded-lg border border-gray-200 bg-gray-50 space-y-2">
          <input
            type="text"
            value={text}
            onChange={(e) => setText(e.target.value)}
            placeholder="What do you want to be reminded about?"
            className="w-full px-3 py-1.5 rounded-md border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-slack-purple"
          />
          <input
            type="datetime-local"
            value={remindAt}
            onChange={(e) => setRemindAt(e.target.value)}
            className="w-full px-3 py-1.5 rounded-md border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-slack-purple"
          />
          {error && <p className="text-xs text-slack-red">{error}</p>}
          <button
            onClick={handleCreate}
            disabled={saving || !text.trim() || !remindAt}
            className="flex items-center gap-1 px-3 py-1.5 rounded-md bg-slack-purple text-white text-xs font-medium hover:bg-slack-darkpurple transition-colors disabled:opacity-50"
          >
            <Bell size={12} />
            {saving ? "Creating..." : "Set Reminder"}
          </button>
        </div>
      )}

      {/* List */}
      {loading ? (
        <div className="text-xs text-gray-400 animate-pulse">Loading reminders...</div>
      ) : reminders.length === 0 ? (
        <div className="flex flex-col items-center py-6 text-gray-400">
          <BellOff size={24} className="mb-2 opacity-50" />
          <p className="text-xs">No reminders set.</p>
        </div>
      ) : (
        <div className="space-y-3">
          {/* Pending */}
          {pending.length > 0 && (
            <div className="space-y-2">
              {pending.map((r) => (
                <div
                  key={r.id}
                  className="group p-2 rounded-md bg-gray-50 border border-gray-100"
                >
                  <div className="flex items-start justify-between gap-2">
                    <div className="flex-1 min-w-0">
                      <p className="text-sm text-gray-700 break-words">{r.text}</p>
                      <p className="text-xs text-gray-400 mt-0.5 flex items-center gap-1">
                        <Clock size={10} />
                        {formatDate(r.remind_at)}
                      </p>
                    </div>
                    <div className="flex items-center gap-1 flex-shrink-0">
                      <button
                        onClick={() => handleComplete(r.id)}
                        className="text-gray-400 hover:text-slack-green p-0.5 rounded transition-colors"
                        title="Mark as done"
                      >
                        <Check size={14} />
                      </button>
                      <button
                        onClick={() => handleDelete(r.id)}
                        className="text-gray-400 hover:text-slack-red p-0.5 rounded transition-colors"
                        title="Delete"
                      >
                        <Trash2 size={14} />
                      </button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}

          {/* Completed */}
          {completed.length > 0 && (
            <div>
              <p className="text-xs text-gray-400 font-medium mb-1">Completed</p>
              <div className="space-y-2">
                {completed.map((r) => (
                  <div
                    key={r.id}
                    className="group p-2 rounded-md bg-gray-50 border border-gray-100 opacity-60"
                  >
                    <div className="flex items-start justify-between gap-2">
                      <div className="flex-1 min-w-0">
                        <p className="text-sm text-gray-500 line-through break-words">
                          {r.text}
                        </p>
                        <p className="text-xs text-gray-400 mt-0.5">
                          {formatDate(r.remind_at)}
                        </p>
                      </div>
                      <button
                        onClick={() => handleDelete(r.id)}
                        className="text-gray-400 hover:text-slack-red p-0.5 rounded transition-colors flex-shrink-0"
                      >
                        <Trash2 size={14} />
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

export default Reminders;