"use client";

import { useState, useEffect, useRef } from "react";
import { User } from "@prisma/client";
import { Loader2, Eye, EyeOff, Upload, AlertTriangle, CheckCircle2 } from "lucide-react";

interface UserPreferences {
  theme: string;
  defaultWeightUnit: string;
  defaultRestSeconds: number;
  enableClaudeAI: boolean;
  claudeApiKey?: string;
}

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 [showApiKey, setShowApiKey] = useState(false);
  const [preferences, setPreferences] = useState<UserPreferences>({
    theme: "system",
    defaultWeightUnit: "lbs",
    defaultRestSeconds: 90,
    enableClaudeAI: false,
  });

  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>

      {/* Claude AI Section */}
      <div className="bg-zinc-900 border border-zinc-800 rounded-lg p-6">
        <h2 className="text-lg font-bold text-white mb-4">
          Claude AI Integration
        </h2>
        <p className="text-sm text-zinc-500 mb-4">
          Enable Claude AI to get personalized workout recommendations and
          program optimization suggestions.
        </p>

        <div className="space-y-4">
          {/* Enable Toggle */}
          <div className="flex items-center justify-between">
            <span className="text-sm font-medium text-zinc-300">
              Enable Claude AI
            </span>
            <button
              type="button"
              onClick={() =>
                setPreferences((prev) => ({
                  ...prev,
                  enableClaudeAI: !prev.enableClaudeAI,
                }))
              }
              className={`relative w-11 h-6 rounded-full transition ${
                preferences.enableClaudeAI ? "bg-white" : "bg-zinc-700"
              }`}
            >
              <span
                className={`absolute top-0.5 left-0.5 w-5 h-5 rounded-full transition-transform ${
                  preferences.enableClaudeAI
                    ? "translate-x-5 bg-black"
                    : "translate-x-0 bg-zinc-400"
                }`}
              />
            </button>
          </div>

          {/* API Key Input - Only show if enabled */}
          {preferences.enableClaudeAI && (
            <div>
              <label className="block text-sm font-medium text-zinc-400 mb-1">
                Claude API Key
              </label>
              <div className="relative">
                <input
                  type={showApiKey ? "text" : "password"}
                  value={preferences.claudeApiKey || ""}
                  onChange={(e) =>
                    setPreferences((prev) => ({
                      ...prev,
                      claudeApiKey: e.target.value,
                    }))
                  }
                  placeholder="sk-..."
                  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 pr-10"
                />
                <button
                  type="button"
                  onClick={() => setShowApiKey(!showApiKey)}
                  className="absolute right-3 top-2.5 text-zinc-500 hover:text-zinc-300"
                >
                  {showApiKey ? (
                    <EyeOff className="w-5 h-5" />
                  ) : (
                    <Eye className="w-5 h-5" />
                  )}
                </button>
              </div>
              <p className="text-xs text-zinc-600 mt-1">
                Get your API key from{" "}
                <a
                  href="https://console.anthropic.com"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-zinc-400 hover:text-white underline"
                >
                  console.anthropic.com
                </a>
              </p>
            </div>
          )}
        </div>
      </div>

      {/* 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 */}
      <DatabaseImport />
    </form>
  );
}

// ---------- 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>
  );
}