"use client";

import { useEffect, useMemo, useState } from "react";
import {
  CheckCircle2,
  ImageUp,
  Loader2,
  RefreshCcw,
  Save,
  Settings,
  Upload,
  XCircle,
} from "lucide-react";
import BrandLogo from "@/components/BrandLogo";

const DEFAULT_LOGO_URL = "";

type LogoResponse = {
  logoUrl?: string | null;
  defaultLogoUrl?: string | null;
  error?: string;
};

export default function SettingsPage() {
  const [currentLogo, setCurrentLogo] = useState<string | null>(DEFAULT_LOGO_URL);
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [resetting, setResetting] = useState(false);
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);

  const displayLogo = previewUrl || currentLogo;
  const fileSizeText = useMemo(() => {
    if (!selectedFile) return "";
    const sizeInMb = selectedFile.size / (1024 * 1024);
    return `${sizeInMb.toFixed(2)} MB`;
  }, [selectedFile]);

  const loadLogo = async () => {
    try {
      const response = await fetch("/api/settings/logo", { cache: "no-store" });
      const data = (await response.json()) as LogoResponse;
      setCurrentLogo(data.logoUrl || DEFAULT_LOGO_URL);
    } catch {
      setCurrentLogo(DEFAULT_LOGO_URL);
    } finally {
      setLoading(false);
    }
  };

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

  useEffect(() => {
    return () => {
      if (previewUrl) URL.revokeObjectURL(previewUrl);
    };
  }, [previewUrl]);

  const chooseFile = (file: File | null) => {
    setMessage(null);

    if (previewUrl) URL.revokeObjectURL(previewUrl);

    if (!file) {
      setSelectedFile(null);
      setPreviewUrl(null);
      return;
    }

    const allowed = ["image/png", "image/jpeg", "image/webp"];
    if (!allowed.includes(file.type)) {
      setMessage({ type: "error", text: "Only PNG, JPG/JPEG, or WEBP logo files are allowed." });
      setSelectedFile(null);
      setPreviewUrl(null);
      return;
    }

    if (file.size > 5 * 1024 * 1024) {
      setMessage({ type: "error", text: "Logo file must be less than 5MB." });
      setSelectedFile(null);
      setPreviewUrl(null);
      return;
    }

    setSelectedFile(file);
    setPreviewUrl(URL.createObjectURL(file));
  };

  const saveLogo = async () => {
    if (!selectedFile) {
      setMessage({ type: "error", text: "Please select a logo file first." });
      return;
    }

    setSaving(true);
    setMessage(null);

    try {
      const formData = new FormData();
      formData.append("logo", selectedFile);

      const response = await fetch("/api/settings/logo", {
        method: "POST",
        body: formData,
      });
      const data = (await response.json()) as LogoResponse;

      if (!response.ok || !data.logoUrl) {
        throw new Error(data.error || "Failed to upload logo.");
      }

      setCurrentLogo(`${data.logoUrl}?v=${Date.now()}`);
      setSelectedFile(null);
      if (previewUrl) URL.revokeObjectURL(previewUrl);
      setPreviewUrl(null);
      setMessage({ type: "success", text: "Logo saved successfully. Sidebar and dashboard updated." });
      window.dispatchEvent(new Event("brand-logo-updated"));
    } catch (error) {
      setMessage({
        type: "error",
        text: error instanceof Error ? error.message : "Failed to upload logo.",
      });
    } finally {
      setSaving(false);
    }
  };

  const resetLogo = async () => {
    setResetting(true);
    setMessage(null);

    try {
      const response = await fetch("/api/settings/logo", { method: "DELETE" });
      const data = (await response.json()) as LogoResponse;

      if (!response.ok) {
        throw new Error(data.error || "Failed to reset logo.");
      }

      if (previewUrl) URL.revokeObjectURL(previewUrl);
      setPreviewUrl(null);
      setSelectedFile(null);
      setCurrentLogo(data.logoUrl || DEFAULT_LOGO_URL);
      setMessage({ type: "success", text: "Logo reset to original default style." });
      window.dispatchEvent(new Event("brand-logo-updated"));
    } catch (error) {
      setMessage({
        type: "error",
        text: error instanceof Error ? error.message : "Failed to reset logo.",
      });
    } finally {
      setResetting(false);
    }
  };

  return (
    <div>
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900 flex items-center gap-3">
          <Settings className="text-brand-500" size={28} />
          Settings
        </h1>
        <p className="text-gray-500 mt-1">
          Upload your own ChicAdorn page logo and manage brand settings.
        </p>
      </div>

      <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
        <div className="xl:col-span-2 bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
          <div className="flex items-center gap-3 mb-5">
            <div className="w-11 h-11 rounded-xl bg-brand-50 text-brand-600 flex items-center justify-center">
              <ImageUp size={22} />
            </div>
            <div>
              <h2 className="text-xl font-bold text-gray-900">Logo Upload</h2>
              <p className="text-sm text-gray-500">PNG, JPG/JPEG, or WEBP — maximum 5MB.</p>
            </div>
          </div>

          <label className="block cursor-pointer rounded-2xl border-2 border-dashed border-brand-200 bg-brand-50/40 p-8 text-center hover:bg-brand-50 transition-colors">
            <input
              type="file"
              accept="image/png,image/jpeg,image/webp"
              className="hidden"
              onChange={(event) => chooseFile(event.target.files?.[0] || null)}
            />
            <div className="mx-auto mb-4 w-14 h-14 rounded-2xl bg-white text-brand-600 flex items-center justify-center shadow-sm">
              <Upload size={26} />
            </div>
            <p className="font-semibold text-gray-900">Click to choose your logo</p>
            <p className="text-sm text-gray-500 mt-1">আপনার PNG logo select করে Save Logo চাপুন।</p>
          </label>

          {selectedFile && (
            <div className="mt-4 rounded-xl bg-gray-50 border border-gray-100 p-4 flex items-center justify-between gap-4">
              <div>
                <p className="font-medium text-gray-900">{selectedFile.name}</p>
                <p className="text-xs text-gray-500">{selectedFile.type} • {fileSizeText}</p>
              </div>
              <button
                type="button"
                onClick={() => chooseFile(null)}
                className="text-gray-400 hover:text-red-500 transition-colors"
              >
                <XCircle size={20} />
              </button>
            </div>
          )}

          {message && (
            <div className={`mt-4 rounded-xl p-4 flex items-center gap-3 text-sm font-medium ${
              message.type === "success"
                ? "bg-green-50 text-green-700 border border-green-100"
                : "bg-red-50 text-red-700 border border-red-100"
            }`}>
              {message.type === "success" ? <CheckCircle2 size={18} /> : <XCircle size={18} />}
              {message.text}
            </div>
          )}

          <div className="flex flex-col sm:flex-row gap-3 mt-6">
            <button
              type="button"
              onClick={saveLogo}
              disabled={saving || !selectedFile}
              className="inline-flex items-center justify-center gap-2 bg-brand-600 hover:bg-brand-700 disabled:bg-gray-300 disabled:cursor-not-allowed text-white px-5 py-2.5 rounded-xl font-medium transition-colors"
            >
              {saving ? <Loader2 size={18} className="animate-spin" /> : <Save size={18} />}
              Save Logo
            </button>
            <button
              type="button"
              onClick={resetLogo}
              disabled={resetting}
              className="inline-flex items-center justify-center gap-2 border border-gray-200 hover:bg-gray-50 disabled:opacity-60 text-gray-700 px-5 py-2.5 rounded-xl font-medium transition-colors"
            >
              {resetting ? <Loader2 size={18} className="animate-spin" /> : <RefreshCcw size={18} />}
              Reset Default Logo
            </button>
          </div>
        </div>

        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
          <h2 className="text-xl font-bold text-gray-900 mb-4">Live Preview</h2>
          <div className="rounded-2xl bg-white p-4 border border-gray-100 shadow-inner">
            {loading ? (
              <div className="h-64 flex items-center justify-center">
                <Loader2 className="animate-spin text-brand-600" size={28} />
              </div>
            ) : displayLogo ? (
              <img
                src={displayLogo}
                alt="Logo preview"
                className="w-full max-h-72 rounded-xl object-contain"
              />
            ) : (
              <div className="flex min-h-64 items-center justify-center">
                <BrandLogo variant="settings" />
              </div>
            )}
          </div>
          <div className="mt-4 text-sm text-gray-500 space-y-2">
            <p>After saving, the uploaded logo will appear in:</p>
            <ul className="list-disc pl-5 space-y-1">
              <li>Left sidebar brand area</li>
              <li>Dashboard top header</li>
            </ul>
            <p className="text-xs text-gray-400 pt-2">
              Note: On local PC, uploaded files are saved under <span className="font-mono">public/uploads</span>.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}