"use client";

import { useState, useEffect, useRef } from "react";
import { User } from "@prisma/client";
import {
  Loader2,
  Upload,
  Download,
  AlertTriangle,
  CheckCircle2,
} from "lucide-react";
import Link from "next/link";

interface UserPreferences {
  theme: string;
  defaultWeightUnit: string;
  defaultRestSeconds: number;
}

export default function SettingsForm({ user }: { user: User }) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);
  const [preferences, setPreferences] = useState<UserPreferences>({
    theme: "system",
    defaultWeightUnit: "lbs",
    defaultRestSeconds: 90,
  });

  useEffect(() => {
    const fetchPreferences = async () => {
      try {
        const response = await fetch("/api/preferences");
        if (response.ok) {
          const data = await response.json();
          setPreferences(data);
        }
      } catch (err) {
        console.error("Failed to fetch preferences:", err);
      }
    };

    fetchPreferences();
  }, []);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);
    setSuccess(false);
    setLoading(true);

    try {
      const response = await fetch("/api/preferences", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(preferences),
      });

      if (!response.ok) {
        const data = await response.json();
        throw new Error(data.error || "Failed to save preferences");
      }

      setSuccess(true);
      setTimeout(() => setSuccess(false), 3000);
    } catch (err) {
      setError(err instanceof Error ? err.message : "An error occurred");
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      {/* Status Messages */}
      {error && (
        <div className="bg-red-900/30 border border-red-800 rounded-lg p-4 text-red-400 text-sm">
          {error}
        </div>
      )}
      {success && (
        <div className="bg-green-900/30 border border-green-800 rounded-lg p-4 text-green-400 text-sm">
          Settings saved successfully!
        </div>
      )}

      {/* Profile Section */}
      <div className="bg-zinc-900 border border-zinc-800 rounded-lg p-6">
        <h2 className="text-lg font-bold text-white mb-4">Profile</h2>
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-zinc-400 mb-1">
              Name
            </label>
            <input
              type="text"
              value={user.name || ""}
              disabled
              className="w-full px-3 py-2 border border-zinc-700 rounded-lg bg-zinc-800 text-zinc-500"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-zinc-400 mb-1">
              Email
            </label>
            <input
              type="email"
              value={user.email}
              disabled
              className="w-full px-3 py-2 border border-zinc-700 rounded-lg bg-zinc-800 text-zinc-500"
            />
          </div>
        </div>
      </div>

      {/* Preferences Section */}
      <div className="bg-zinc-900 border border-zinc-800 rounded-lg p-6">
        <h2 className="text-lg font-bold text-white mb-4">Preferences</h2>
        <div className="space-y-4">
          {/* Weight Unit */}
          <div>
            <label className="block text-sm font-medium text-zinc-400 mb-2">
              Default Weight Unit
            </label>
            <div className="flex gap-2">
              {["lbs", "kg"].map((unit) => (
                <button
                  key={unit}
                  type="button"
                  onClick={() =>
                    setPreferences((prev) => ({
                      ...prev,
                      defaultWeightUnit: unit,
                    }))
                  }
                  className={`px-4 py-2 rounded-lg text-sm font-medium transition ${
                    preferences.defaultWeightUnit === unit
                      ? "bg-white text-black"
                      : "bg-zinc-800 text-zinc-400 hover:text-white"
                  }`}
                >
                  {unit === "lbs" ? "Pounds (lbs)" : "Kilograms (kg)"}
                </button>
              ))}
            </div>
            <p className="text-xs text-zinc-600 mt-1.5">
              Kettlebell exercises always default to kg
            </p>
          </div>

          {/* Theme */}
          <div>
            <label className="block text-sm font-medium text-zinc-400 mb-2">
              Theme
            </label>
            <select
              value={preferences.theme}
              onChange={(e) =>
                setPreferences((prev) => ({
                  ...prev,
                  theme: e.target.value,
                }))
              }
              className="w-full px-3 py-2 border border-zinc-700 rounded-lg bg-zinc-800 text-white focus:outline-none focus:ring-2 focus:ring-white/20"
            >
              <option value="system">System</option>
              <option value="light">Light</option>
              <option value="dark">Dark</option>
            </select>
          </div>
        </div>
      </div>

      {/* AI integration section deliberately removed — was a misleading
          placeholder for "Claude AI workout recommendations" that the
          codebase never actually delivered. A real model-agnostic AI
          integration (Claude / OpenAI / Gemini / self-hosted Ollama) is
          on the roadmap; the underlying enableClaudeAI/claudeApiKey
          schema columns stay as harmless dead fields until that lands. */}

      {/* Save Button */}
      <button
        type="submit"
        disabled={loading}
        className="w-full bg-white hover:bg-zinc-200 disabled:bg-zinc-700 disabled:text-zinc-500 text-black font-medium py-2.5 px-4 rounded-lg transition flex items-center justify-center gap-2"
      >
        {loading && <Loader2 className="w-4 h-4 animate-spin" />}
        {loading ? "Saving..." : "Save Settings"}
      </button>

      {/* Database Import Section */}
      <DatabaseExport />
      <WorkoutCsvImportShortcut />
      <DatabaseImport />
    </form>
  );
}

// ---------- Database Export Component ----------
function DatabaseExport() {
  const [exportingDb, setExportingDb] = useState(false);
  const [exportingCsv, setExportingCsv] = useState(false);
  const [exportError, setExportError] = useState<string | null>(null);

  const triggerDownload = async (
    endpoint: string,
    fallbackName: string,
    setLoading: (v: boolean) => void
  ) => {
    setLoading(true);
    setExportError(null);

    try {
      const response = await fetch(endpoint, {
        method: "GET",
      });

      if (!response.ok) {
        const maybeJson = await response.json().catch(() => null);
        throw new Error(maybeJson?.error || "Export failed");
      }

      const disposition = response.headers.get("content-disposition") || "";
      const match = disposition.match(/filename="([^"]+)"/i);
      const fileName = match?.[1] || fallbackName;

      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      const anchor = document.createElement("a");
      anchor.href = url;
      anchor.download = fileName;
      document.body.appendChild(anchor);
      anchor.click();
      anchor.remove();
      window.URL.revokeObjectURL(url);
    } catch (err) {
      setExportError(err instanceof Error ? err.message : "Export failed");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="bg-zinc-900 border border-zinc-800 rounded-lg p-6">
      <h2 className="text-lg font-bold text-white mb-1">Export Backups</h2>
      <p className="text-sm text-zinc-500 mb-4">
        Download a full database backup or a CSV export of workout logs.
      </p>

      {exportError && (
        <div className="bg-red-900/30 border border-red-800 rounded-lg p-3 mb-4 flex items-start gap-2">
          <AlertTriangle className="w-4 h-4 text-red-400 flex-shrink-0 mt-0.5" />
          <span className="text-sm text-red-400">{exportError}</span>
        </div>
      )}

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <button
          type="button"
          onClick={() =>
            triggerDownload(
              "/api/settings/export-db",
              "proof-of-work-backup.db",
              setExportingDb
            )
          }
          disabled={exportingDb || exportingCsv}
          className="py-3 border border-zinc-700 rounded-lg text-zinc-300 text-sm font-medium hover:text-white hover:border-zinc-500 disabled:opacity-50 transition flex items-center justify-center gap-2"
        >
          {exportingDb ? (
            <>
              <Loader2 className="w-4 h-4 animate-spin" />
              Exporting DB...
            </>
          ) : (
            <>
              <Download className="w-4 h-4" />
              Export SQLite (.db)
            </>
          )}
        </button>

        <button
          type="button"
          onClick={() =>
            triggerDownload(
              "/api/settings/export-csv",
              "proof-of-work-export.csv",
              setExportingCsv
            )
          }
          disabled={exportingDb || exportingCsv}
          className="py-3 border border-zinc-700 rounded-lg text-zinc-300 text-sm font-medium hover:text-white hover:border-zinc-500 disabled:opacity-50 transition flex items-center justify-center gap-2"
        >
          {exportingCsv ? (
            <>
              <Loader2 className="w-4 h-4 animate-spin" />
              Exporting CSV...
            </>
          ) : (
            <>
              <Download className="w-4 h-4" />
              Export Workout CSV
            </>
          )}
        </button>
      </div>
    </div>
  );
}

// ---------- CSV Import Shortcut ----------
function WorkoutCsvImportShortcut() {
  return (
    <div className="bg-zinc-900 border border-zinc-800 rounded-lg p-6">
      <h2 className="text-lg font-bold text-white mb-1">Import Workouts (CSV)</h2>
      <p className="text-sm text-zinc-500 mb-4">
        One-time migration tool for importing older workout history from CSV.
      </p>
      <Link
        href="/main/import"
        className="w-full inline-flex items-center justify-center gap-2 py-3 border border-zinc-700 rounded-lg text-zinc-300 text-sm font-medium hover:text-white hover:border-zinc-500 transition"
      >
        <Upload className="w-4 h-4" />
        Open CSV Import Tool
      </Link>
    </div>
  );
}

// ---------- Database Import Component ----------
function DatabaseImport() {
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [importing, setImporting] = useState(false);
  const [importError, setImportError] = useState<string | null>(null);
  const [importSuccess, setImportSuccess] = useState<{
    message: string;
    stats: { users: number; exercises: number; workouts: number };
  } | null>(null);
  const [confirmOpen, setConfirmOpen] = useState(false);
  const [selectedFile, setSelectedFile] = useState<File | null>(null);

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

    setImportError(null);
    setImportSuccess(null);
    setSelectedFile(file);
    setConfirmOpen(true);
  };

  const handleImport = async () => {
    if (!selectedFile) return;

    setImporting(true);
    setImportError(null);
    setImportSuccess(null);
    setConfirmOpen(false);

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

      const response = await fetch("/api/settings/import-db", {
        method: "POST",
        body: formData,
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || "Import failed");
      }

      setImportSuccess({
        message: data.message,
        stats: data.stats,
      });

      // Clear the file input
      if (fileInputRef.current) fileInputRef.current.value = "";
      setSelectedFile(null);
    } catch (err) {
      setImportError(
        err instanceof Error ? err.message : "An error occurred during import"
      );
    } finally {
      setImporting(false);
    }
  };

  const handleCancel = () => {
    setConfirmOpen(false);
    setSelectedFile(null);
    if (fileInputRef.current) fileInputRef.current.value = "";
  };

  return (
    <div className="bg-zinc-900 border border-zinc-800 rounded-lg p-6">
      <h2 className="text-lg font-bold text-white mb-1">Import Database</h2>
      <p className="text-sm text-zinc-500 mb-4">
        Upload an existing Workout Planner database file (app.db) to restore
        your workout history. A backup of the current database will be created
        automatically.
      </p>

      {/* Error message */}
      {importError && (
        <div className="bg-red-900/30 border border-red-800 rounded-lg p-3 mb-4 flex items-start gap-2">
          <AlertTriangle className="w-4 h-4 text-red-400 flex-shrink-0 mt-0.5" />
          <span className="text-sm text-red-400">{importError}</span>
        </div>
      )}

      {/* Success message */}
      {importSuccess && (
        <div className="bg-green-900/30 border border-green-800 rounded-lg p-3 mb-4">
          <div className="flex items-start gap-2">
            <CheckCircle2 className="w-4 h-4 text-green-400 flex-shrink-0 mt-0.5" />
            <div>
              <p className="text-sm text-green-400">{importSuccess.message}</p>
              <p className="text-xs text-green-500 mt-1">
                Imported: {importSuccess.stats.users} user(s),{" "}
                {importSuccess.stats.exercises} exercises,{" "}
                {importSuccess.stats.workouts} workouts
              </p>
            </div>
          </div>
          <button
            type="button"
            onClick={() => window.location.reload()}
            className="mt-3 w-full py-2 bg-green-800/50 text-green-300 text-sm font-medium rounded-lg hover:bg-green-800/70 transition"
          >
            Refresh Page to Load Imported Data
          </button>
        </div>
      )}

      {/* Confirmation dialog */}
      {confirmOpen && selectedFile && (
        <div className="bg-yellow-900/20 border border-yellow-800/50 rounded-lg p-4 mb-4">
          <div className="flex items-start gap-2 mb-3">
            <AlertTriangle className="w-4 h-4 text-yellow-500 flex-shrink-0 mt-0.5" />
            <div>
              <p className="text-sm text-yellow-400 font-medium">
                Replace current database?
              </p>
              <p className="text-xs text-yellow-600 mt-1">
                File: {selectedFile.name} (
                {(selectedFile.size / 1024).toFixed(0)} KB)
              </p>
              <p className="text-xs text-yellow-600 mt-0.5">
                Your current database will be backed up before replacement.
              </p>
            </div>
          </div>
          <div className="flex gap-2">
            <button
              type="button"
              onClick={handleImport}
              className="flex-1 py-2 bg-yellow-700/50 text-yellow-200 text-sm font-medium rounded-lg hover:bg-yellow-700/70 transition"
            >
              Yes, Import
            </button>
            <button
              type="button"
              onClick={handleCancel}
              className="flex-1 py-2 bg-zinc-800 text-zinc-400 text-sm font-medium rounded-lg hover:bg-zinc-700 transition"
            >
              Cancel
            </button>
          </div>
        </div>
      )}

      {/* File input and upload button */}
      {!confirmOpen && (
        <div>
          <input
            ref={fileInputRef}
            type="file"
            accept=".db,.sqlite,.sqlite3"
            onChange={handleFileSelect}
            className="hidden"
            id="db-import-input"
          />
          <button
            type="button"
            onClick={() => fileInputRef.current?.click()}
            disabled={importing}
            className="w-full py-3 border border-dashed border-zinc-700 rounded-lg text-zinc-400 text-sm font-medium hover:text-white hover:border-zinc-500 disabled:opacity-50 transition flex items-center justify-center gap-2"
          >
            {importing ? (
              <>
                <Loader2 className="w-4 h-4 animate-spin" />
                Importing...
              </>
            ) : (
              <>
                <Upload className="w-4 h-4" />
                Select Database File (.db)
              </>
            )}
          </button>
          <p className="text-[10px] text-zinc-600 mt-2 text-center">
            Located at prisma/data/app.db in your local project
          </p>
        </div>
      )}
    </div>
  );
}
