"use client";

import { useEffect, useState } from "react";
import { getNotificationPreferences, updateNotificationPreferences, NotificationPreferences } from "@/lib/api";
import { Bell, MessageSquare, AtSign, Search, Moon } from "lucide-react";

interface ToggleProps {
  checked: boolean;
  onChange: (val: boolean) => void;
  label: string;
  desc: string;
  icon: typeof Bell;
}

function Toggle({ checked, onChange, label, desc, icon: Icon }: ToggleProps) {
  return (
    <div className="flex items-center justify-between py-3 border-b border-gray-100 last:border-0">
      <div className="flex items-center gap-3">
        <Icon size={20} className="text-gray-400" />
        <div>
          <p className="text-sm font-medium text-gray-700">{label}</p>
          <p className="text-xs text-gray-400">{desc}</p>
        </div>
      </div>
      <button
        type="button"
        onClick={() => onChange(!checked)}
        className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors flex-shrink-0 ${
          checked ? "bg-slack-green" : "bg-gray-300"
        }`}
      >
        <span
          className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
            checked ? "translate-x-6" : "translate-x-1"
          }`}
        />
      </button>
    </div>
  );
}

export function NotificationPreferencesTab() {
  const [prefs, setPrefs] = useState<NotificationPreferences>({
    dm_notifications: true,
    mention_notifications: true,
    keyword_notifications: false,
    keywords: [],
    dnd_enabled: false,
    dnd_start: "22:00",
    dnd_end: "08:00",
  });
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [keywordInput, setKeywordInput] = useState("");
  const [msg, setMsg] = useState("");

  useEffect(() => {
    getNotificationPreferences()
      .then(setPrefs)
      .catch(() => {
        // Use defaults if endpoint not available
      })
      .finally(() => setLoading(false));
  }, []);

  const handleSave = () => {
    setSaving(true);
    setMsg("");
    updateNotificationPreferences(prefs)
      .then(() => {
        setMsg("Preferences saved!");
        setTimeout(() => setMsg(""), 3000);
      })
      .catch((e) => setMsg(`Error: ${e.message}`))
      .finally(() => setSaving(false));
  };

  const addKeyword = () => {
    const kw = keywordInput.trim();
    if (kw && !prefs.keywords.includes(kw)) {
      setPrefs({ ...prefs, keywords: [...prefs.keywords, kw] });
      setKeywordInput("");
    }
  };

  const removeKeyword = (kw: string) => {
    setPrefs({ ...prefs, keywords: prefs.keywords.filter((k) => k !== kw) });
  };

  if (loading) {
    return <div className="text-sm text-gray-400 animate-pulse">Loading preferences...</div>;
  }

  return (
    <div className="space-y-6">
      {msg && (
        <div className={`p-3 rounded-md text-sm ${msg.includes("Error") ? "bg-red-50 border border-red-200 text-red-700" : "bg-green-50 border border-green-200 text-green-700"}`}>
          {msg}
        </div>
      )}

      {/* Notification toggles */}
      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
        <h3 className="font-bold text-gray-800 mb-2 flex items-center gap-2">
          <Bell size={16} className="text-slack-purple" />
          Notification Categories
        </h3>
        <Toggle
          checked={prefs.dm_notifications}
          onChange={(val) => setPrefs({ ...prefs, dm_notifications: val })}
          label="Direct messages"
          desc="Get notified when you receive a DM"
          icon={MessageSquare}
        />
        <Toggle
          checked={prefs.mention_notifications}
          onChange={(val) => setPrefs({ ...prefs, mention_notifications: val })}
          label="Mentions"
          desc="Get notified when someone @mentions you"
          icon={AtSign}
        />
        <Toggle
          checked={prefs.keyword_notifications}
          onChange={(val) => setPrefs({ ...prefs, keyword_notifications: val })}
          label="Keywords"
          desc="Get notified when specific keywords appear in messages"
          icon={Search}
        />
      </div>

      {/* Keywords */}
      {prefs.keyword_notifications && (
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
          <h3 className="font-bold text-gray-800 mb-3">Keyword List</h3>
          <div className="flex gap-2 mb-3">
            <input
              type="text"
              value={keywordInput}
              onChange={(e) => setKeywordInput(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && addKeyword()}
              placeholder="Add a keyword..."
              className="flex-1 px-3 py-1.5 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-slack-purple text-sm"
            />
            <button
              onClick={addKeyword}
              className="px-3 py-1.5 rounded-md bg-slack-purple text-white text-sm font-medium hover:bg-slack-darkpurple transition-colors"
            >
              Add
            </button>
          </div>
          <div className="flex flex-wrap gap-2">
            {prefs.keywords.map((kw) => (
              <span
                key={kw}
                className="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-gray-100 text-sm text-gray-700"
              >
                {kw}
                <button
                  onClick={() => removeKeyword(kw)}
                  className="text-gray-400 hover:text-slack-red"
                >
                  ×
                </button>
              </span>
            ))}
            {prefs.keywords.length === 0 && (
              <p className="text-xs text-gray-400">No keywords added yet.</p>
            )}
          </div>
        </div>
      )}

      {/* DND Schedule */}
      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
        <h3 className="font-bold text-gray-800 mb-3 flex items-center gap-2">
          <Moon size={16} className="text-slack-purple" />
          Do Not Disturb
        </h3>
        <div className="flex items-center justify-between py-2 border-b border-gray-100 mb-3">
          <div>
            <p className="text-sm font-medium text-gray-700">Enable DND schedule</p>
            <p className="text-xs text-gray-400">Suppress notifications during specified hours</p>
          </div>
          <button
            type="button"
            onClick={() => setPrefs({ ...prefs, dnd_enabled: !prefs.dnd_enabled })}
            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
              prefs.dnd_enabled ? "bg-slack-green" : "bg-gray-300"
            }`}
          >
            <span
              className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                prefs.dnd_enabled ? "translate-x-6" : "translate-x-1"
              }`}
            />
          </button>
        </div>
        {prefs.dnd_enabled && (
          <div className="flex items-center gap-4">
            <div>
              <label className="block text-xs font-semibold text-gray-500 mb-1">Start</label>
              <input
                type="time"
                value={prefs.dnd_start}
                onChange={(e) => setPrefs({ ...prefs, dnd_start: e.target.value })}
                className="px-3 py-1.5 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-slack-purple text-sm"
              />
            </div>
            <div>
              <label className="block text-xs font-semibold text-gray-500 mb-1">End</label>
              <input
                type="time"
                value={prefs.dnd_end}
                onChange={(e) => setPrefs({ ...prefs, dnd_end: e.target.value })}
                className="px-3 py-1.5 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-slack-purple text-sm"
              />
            </div>
          </div>
        )}
      </div>

      {/* Save */}
      <div className="flex justify-end">
        <button
          onClick={handleSave}
          disabled={saving}
          className="px-6 py-2.5 rounded-md bg-slack-purple text-white font-semibold text-sm hover:bg-slack-darkpurple transition-colors disabled:opacity-50"
        >
          {saving ? "Saving..." : "Save preferences"}
        </button>
      </div>
    </div>
  );
}