"use client";

import { useEffect, useState, useCallback } from "react";
import AdminLayout from "@/components/admin/AdminLayout";
import { CheckIcon, SpinnerIcon } from "@/components/Icons";

interface Setting {
  key: string;
  value: string | null;
  type: string | null;
  group: string | null;
}

export default function SettingsPage() {
  const [settings, setSettings] = useState<Setting[]>([]);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [activeTab, setActiveTab] = useState("general");
  const [saved, setSaved] = useState(false);

  const fetchSettings = useCallback(async () => {
    try {
      const res = await fetch("/api/admin/settings");
      if (res.ok) {
        const data = await res.json();
        setSettings(data.settings);
      }
    } catch (e) {
      console.error(e);
    } finally {
      setLoading(false);
    }
  }, []);

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

  const getValue = (key: string) => {
    return settings.find((s) => s.key === key)?.value || "";
  };

  const setValue = (key: string, value: string) => {
    setSettings(
      settings.map((s) => (s.key === key ? { ...s, value } : s))
    );
  };

  const handleSave = async () => {
    setSaving(true);
    try {
      const res = await fetch("/api/admin/settings", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ settings }),
      });
      if (res.ok) {
        setSaved(true);
        setTimeout(() => setSaved(false), 2000);
      }
    } catch (e) {
      console.error(e);
    } finally {
      setSaving(false);
    }
  };

  const tabs = [
    { id: "general", label: "General" },
    { id: "contact", label: "Contact" },
    { id: "social", label: "Social Media" },
  ];

  const renderField = (
    key: string,
    label: string,
    type: "text" | "email" | "url" | "textarea" | "select" = "text",
    options?: { value: string; label: string }[]
  ) => {
    const value = getValue(key);

    return (
      <div>
        <label className="block text-sm font-medium text-text-secondary mb-1.5">
          {label}
        </label>
        {type === "textarea" ? (
          <textarea
            rows={4}
            value={value}
            onChange={(e) => setValue(key, e.target.value)}
            className="w-full"
          />
        ) : type === "select" && options ? (
          <select
            value={value}
            onChange={(e) => setValue(key, e.target.value)}
            className="w-full"
          >
            {options.map((opt) => (
              <option key={opt.value} value={opt.value}>
                {opt.label}
              </option>
            ))}
          </select>
        ) : (
          <input
            type={type}
            value={value}
            onChange={(e) => setValue(key, e.target.value)}
            className="w-full"
          />
        )}
      </div>
    );
  };

  if (loading) {
    return (
      <AdminLayout>
        <div className="flex items-center justify-center py-20">
          <SpinnerIcon size={40} className="text-primary" />
        </div>
      </AdminLayout>
    );
  }

  return (
    <AdminLayout>
      <div className="max-w-4xl mx-auto space-y-6">
        {/* Header */}
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold text-text-primary">Settings</h1>
            <p className="text-text-muted mt-1">
              Manage your portfolio settings and preferences
            </p>
          </div>
          <button
            onClick={handleSave}
            disabled={saving}
            className="px-5 py-2.5 bg-gradient-to-r from-primary to-primary-light text-white font-semibold rounded-xl hover:shadow-lg hover:shadow-primary/25 transition-all flex items-center gap-2 disabled:opacity-50"
          >
            {saving ? (
              <>
                <SpinnerIcon size={16} />
                Saving...
              </>
            ) : saved ? (
              <>
                <CheckIcon size={16} />
                Saved!
              </>
            ) : (
              <>
                <CheckIcon size={16} />
                Save Changes
              </>
            )}
          </button>
        </div>

        {/* Tabs */}
        <div className="flex gap-1 p-1 bg-surface-elevated rounded-xl">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`flex-1 py-2.5 text-sm font-medium rounded-lg transition-colors ${
                activeTab === tab.id
                  ? "bg-primary text-white"
                  : "text-text-muted hover:text-text-primary"
              }`}
            >
              {tab.label}
            </button>
          ))}
        </div>

        {/* Content */}
        <div className="glass rounded-xl p-6 space-y-6">
          {activeTab === "general" && (
            <>
              <h2 className="font-semibold text-text-primary border-b border-border pb-3">
                General Settings
              </h2>
              {renderField("site_name", "Site Name")}
              {renderField("site_tagline", "Tagline")}
              {renderField("site_description", "Description", "textarea")}
              {renderField("cv_url", "CV/Resume URL", "url")}
              {renderField("availability_status", "Availability Status", "select", [
                { value: "available", label: "🟢 Available for Work" },
                { value: "busy", label: "🟡 Limited Availability" },
                { value: "unavailable", label: "🔴 Not Available" },
              ])}
              {renderField("timezone", "Timezone")}
            </>
          )}

          {activeTab === "contact" && (
            <>
              <h2 className="font-semibold text-text-primary border-b border-border pb-3">
                Contact Information
              </h2>
              {renderField("contact_email", "Email Address", "email")}
              {renderField("contact_phone", "Phone Number")}
              {renderField("contact_address", "Address")}
              {renderField("whatsapp_number", "WhatsApp Number")}
            </>
          )}

          {activeTab === "social" && (
            <>
              <h2 className="font-semibold text-text-primary border-b border-border pb-3">
                Social Media Links
              </h2>
              {renderField("github_url", "GitHub URL", "url")}
              {renderField("linkedin_url", "LinkedIn URL", "url")}
              {renderField("twitter_url", "Twitter/X URL", "url")}
              {renderField("youtube_url", "YouTube URL", "url")}
            </>
          )}
        </div>

        {/* Danger zone */}
        <div className="glass rounded-xl p-6 border border-danger/20">
          <h2 className="font-semibold text-danger mb-4">Danger Zone</h2>
          <div className="flex items-center justify-between">
            <div>
              <p className="text-text-primary font-medium">Clear All Data</p>
              <p className="text-sm text-text-muted">
                This will delete all your portfolio data permanently.
              </p>
            </div>
            <button className="px-4 py-2 border border-danger text-danger rounded-xl hover:bg-danger/10 transition-colors text-sm font-medium">
              Clear Data
            </button>
          </div>
        </div>
      </div>
    </AdminLayout>
  );
}