"use client";

import { useEffect, useState, useRef } from "react";
import InstituteLogo from "./InstituteLogo";

export default function LogoManager() {
  const [currentLogo, setCurrentLogo] = useState<string>("");
  const [inputUrl, setInputUrl] = useState<string>("");
  const [previewUrl, setPreviewUrl] = useState<string>("");
  const [saving, setSaving] = useState<boolean>(false);
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    // Load existing logo from localStorage or API
    if (typeof window !== "undefined") {
      const saved = localStorage.getItem("is_school_logo") || "";
      setCurrentLogo(saved);
      setPreviewUrl(saved);
      setInputUrl(saved);
    }

    // Also fetch server settings
    fetch("/api/admin/settings")
      .then((res) => res.json())
      .then((data) => {
        if (data.ok && data.settings?.school_logo) {
          setCurrentLogo(data.settings.school_logo);
          setPreviewUrl(data.settings.school_logo);
          setInputUrl(data.settings.school_logo);
          localStorage.setItem("is_school_logo", data.settings.school_logo);
        }
      })
      .catch(() => {});
  }, []);

  function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (!file) return;

    if (file.size > 2 * 1024 * 1024) {
      setMessage({ type: "error", text: "Image file size should be less than 2MB." });
      return;
    }

    const reader = new FileReader();
    reader.onload = (event) => {
      const base64 = event.target?.result as string;
      setPreviewUrl(base64);
      setInputUrl(base64);
      setMessage(null);
    };
    reader.readAsDataURL(file);
  }

  function handleUrlChange(val: string) {
    setInputUrl(val);
    setPreviewUrl(val.trim());
    setMessage(null);
  }

  async function handleSaveLogo() {
    setSaving(true);
    setMessage(null);

    const logoToSave = previewUrl.trim();

    try {
      // 1. Save to localStorage
      if (logoToSave) {
        localStorage.setItem("is_school_logo", logoToSave);
      } else {
        localStorage.removeItem("is_school_logo");
      }

      // 2. Broadcast custom event across open windows/components
      window.dispatchEvent(
        new CustomEvent("school_logo_updated", { detail: logoToSave })
      );

      // 3. Save to server API
      await fetch("/api/admin/settings", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ school_logo: logoToSave }),
      });

      setCurrentLogo(logoToSave);
      setMessage({
        type: "success",
        text: logoToSave
          ? "Institute Logo updated successfully! The new logo will now appear on all trainee result sheets and portal headers."
          : "Logo reset to official Department of Employment and Training default emblem.",
      });
    } catch {
      setMessage({ type: "error", text: "Failed to save logo to server, saved locally." });
    } finally {
      setSaving(false);
    }
  }

  function handleResetDefault() {
    setPreviewUrl("");
    setInputUrl("");
    if (fileInputRef.current) fileInputRef.current.value = "";
    setMessage(null);
  }

  return (
    <div
      id="logo-update-area"
      className="card-shadow overflow-hidden rounded-md border-2 border-maroon-900/40 bg-white"
    >
      {/* Header Banner */}
      <div className="flex flex-col justify-between gap-2 border-b border-gold-600/30 bg-maroon-950 px-6 py-4 text-cream sm:flex-row sm:items-center">
        <div className="flex items-center gap-3">
          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-gold-500/20 text-xl text-gold-300">
            🏛️
          </div>
          <div>
            <h2 className="font-display text-lg font-bold text-cream sm:text-xl">
              Logo Update Area
            </h2>
            <p className="text-xs text-gold-200/80">
              Manage the official institute &amp; department crest shown on result cards
            </p>
          </div>
        </div>

        <div className="inline-flex items-center gap-1.5 self-start rounded-full border border-gold-400/50 bg-gold-500/10 px-3 py-1 text-[11px] font-bold tracking-wider text-gold-300 uppercase">
          <span className="h-2 w-2 rounded-full bg-gold-400 animate-pulse" />
          Note: Do Not Delete
        </div>
      </div>

      {/* Main Content Area */}
      <div className="p-6 md:p-8">
        {/* Important Warning Notice */}
        <div className="mb-6 rounded-md border border-amber-300 bg-amber-50 p-4 text-amber-900">
          <div className="flex items-start gap-3">
            <span className="text-xl">ℹ️</span>
            <div className="text-xs">
              <strong className="font-bold uppercase tracking-wider text-amber-950">
                Official Document Notice (Do Not Delete):
              </strong>
              <p className="mt-1 leading-relaxed text-amber-900">
                This logo update area controls the crest displayed on the{" "}
                <strong>Provisional Examination Result Sheet</strong>, the generated PDF downloads,
                and the public portal header. You can upload any institution logo or paste an image
                URL. If cleared, it automatically defaults to the official Tamil Nadu Department of
                Employment &amp; Training emblem.
              </p>
            </div>
          </div>
        </div>

        <div className="grid gap-8 lg:grid-cols-12">
          {/* Left Column: Form Controls (7 cols) */}
          <div className="space-y-6 lg:col-span-7">
            {/* Option A: Upload File */}
            <div className="rounded-sm border border-ink/15 bg-cream/50 p-5">
              <label className="block text-xs font-bold uppercase tracking-wider text-maroon-950">
                1. Upload Custom Logo Image
              </label>
              <p className="mt-0.5 text-[11px] text-ink/60">
                Supports PNG, JPG, WebP, or SVG (Recommended square or circular format, max 2MB)
              </p>

              <div className="mt-3 flex flex-wrap items-center gap-3">
                <input
                  ref={fileInputRef}
                  type="file"
                  accept="image/png, image/jpeg, image/webp, image/svg+xml"
                  onChange={handleFileChange}
                  className="block w-full text-xs text-ink file:mr-4 file:rounded-xs file:border-0 file:bg-maroon-900 file:px-4 file:py-2.5 file:text-xs file:font-bold file:uppercase file:tracking-wider file:text-cream hover:file:bg-maroon-800"
                />
              </div>
            </div>

            {/* Option B: Enter Direct URL */}
            <div className="rounded-sm border border-ink/15 bg-cream/50 p-5">
              <label htmlFor="logo-url" className="block text-xs font-bold uppercase tracking-wider text-maroon-950">
                2. Or Enter Direct Image URL
              </label>
              <p className="mt-0.5 text-[11px] text-ink/60">
                Paste any hosted logo web address (e.g. https://yourschool.edu/logo.png)
              </p>

              <input
                id="logo-url"
                type="url"
                value={inputUrl.startsWith("data:") ? "(Uploaded local image data)" : inputUrl}
                disabled={inputUrl.startsWith("data:")}
                onChange={(e) => handleUrlChange(e.target.value)}
                placeholder="https://example.com/school-logo.png"
                className="mt-3 w-full rounded-sm border border-ink/25 bg-white px-3.5 py-2.5 font-mono text-xs text-ink outline-none transition-all placeholder:font-sans placeholder:text-ink/35 focus:border-maroon-800 focus:ring-1 focus:ring-maroon-800 disabled:bg-ink/5 disabled:text-ink/50"
              />

              {inputUrl.startsWith("data:") && (
                <button
                  type="button"
                  onClick={() => {
                    setInputUrl("");
                    setPreviewUrl("");
                    if (fileInputRef.current) fileInputRef.current.value = "";
                  }}
                  className="mt-2 text-[11px] font-semibold text-maroon-800 hover:underline"
                >
                  Clear uploaded file to enter URL instead
                </button>
              )}
            </div>

            {/* Notification message */}
            {message && (
              <div
                className={`rounded-sm p-3.5 text-xs font-semibold ${
                  message.type === "success"
                    ? "border border-forest-600/40 bg-forest-50 text-forest-900"
                    : "border border-maroon-600/40 bg-maroon-50 text-maroon-900"
                }`}
              >
                {message.type === "success" ? "✅ " : "❌ "}
                {message.text}
              </div>
            )}

            {/* Actions */}
            <div className="flex flex-wrap items-center gap-3 pt-2">
              <button
                type="button"
                onClick={handleSaveLogo}
                disabled={saving}
                className="flex items-center gap-2 rounded-sm bg-maroon-900 px-6 py-3 text-xs font-bold uppercase tracking-widest text-cream shadow-sm hover:bg-maroon-800 disabled:opacity-60"
              >
                <span>💾</span>
                <span>{saving ? "Saving Logo…" : "Save & Update Logo"}</span>
              </button>

              <button
                type="button"
                onClick={handleResetDefault}
                className="rounded-sm border border-ink/30 bg-white px-5 py-3 text-xs font-semibold uppercase tracking-wider text-ink/80 hover:bg-ink/5"
              >
                Reset to Default Crest
              </button>
            </div>
          </div>

          {/* Right Column: Live Mock Preview (5 cols) */}
          <div className="rounded-md border-2 border-maroon-900/20 bg-cream p-5 lg:col-span-5">
            <p className="text-[10px] font-bold uppercase tracking-[0.25em] text-maroon-900">
              Live Result Page Logo Preview
            </p>
            <p className="mt-0.5 text-xs text-ink/60">
              How the logo appears at scale on the candidate result sheet:
            </p>

            {/* Mock Header Card */}
            <div className="mt-4 rounded-sm border border-maroon-900/30 bg-white p-4 shadow-sm text-center">
              <div className="flex items-center justify-center gap-3">
                <div className="flex h-20 w-20 items-center justify-center rounded-sm border border-dashed border-ink/20 bg-cream/30 p-1">
                  <InstituteLogo
                    size={72}
                    customSrc={previewUrl || undefined}
                    className="object-contain"
                  />
                </div>
              </div>

              <p className="mt-3 text-[9px] font-bold uppercase tracking-[0.3em] text-maroon-800">
                Government of Tamil Nadu
              </p>
              <p className="font-display text-sm font-bold uppercase text-maroon-950">
                Department of Employment and Training
              </p>
              <p className="font-tamil text-[10px] font-medium text-maroon-900/80">
                வேலைவாய்ப்பு மற்றும் பயிற்சித் துறை
              </p>
              <div className="mt-2 text-[10px] font-semibold text-ink/70">
                St.Micheal Industrial School
              </div>
            </div>

            {/* Status Information */}
            <div className="mt-4 space-y-2 text-xs">
              <div className="flex justify-between border-b border-ink/10 pb-1.5">
                <span className="text-ink/60">Current Status:</span>
                <span className="font-bold text-maroon-950">
                  {currentLogo ? "Custom Logo Active" : "Default DET Crest Active"}
                </span>
              </div>
              <div className="flex justify-between border-b border-ink/10 pb-1.5">
                <span className="text-ink/60">Display Size:</span>
                <span className="font-mono text-ink">76px × 76px (Standard)</span>
              </div>
              <div className="flex justify-between">
                <span className="text-ink/60">Storage Mode:</span>
                <span className="font-mono text-ink">MySQL &amp; LocalStorage</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}