"use client";

import { useEffect, useState } from "react";
import { Save, Bot, Key, Palette, Type } from "lucide-react";
import { settingsApi } from "@/lib/api";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";

export default function SettingsPage() {
  const [settings, setSettings] = useState<Record<string, string>>({});
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);

  useEffect(() => {
    settingsApi.getAll()
      .then((res) => { setSettings(res.data || {}); setLoading(false); })
      .catch(() => setLoading(false));
  }, []);

  const updateSetting = (key: string, value: string) => {
    setSettings((prev) => ({ ...prev, [key]: value }));
    setSaved(false);
  };

  const handleSave = async () => {
    setSaving(true);
    try {
      await settingsApi.update(settings);
      setSaved(true);
      setTimeout(() => setSaved(false), 3000);
    } catch { /* empty */ }
    setSaving(false);
  };

  if (loading) {
    return (
      <div className="space-y-6">
        {[1, 2, 3].map((i) => <div key={i} className="bg-card rounded-xl border border-border/50 p-6 animate-pulse"><div className="h-32 bg-muted rounded" /></div>)}
      </div>
    );
  }

  return (
    <div className="space-y-6 max-w-2xl">
      <div className="flex items-center justify-between">
        <div><h2 className="text-lg font-bold">Ayarlar</h2><p className="text-sm text-muted-foreground">Sistem ve AI yapılandırması</p></div>
        <Button onClick={handleSave} disabled={saving} className="gap-2">
          {saving ? <div className="w-4 h-4 border-2 border-primary-foreground/30 border-t-primary-foreground rounded-full animate-spin" /> : <Save className="w-4 h-4" />}
          {saved ? "✓ Kaydedildi" : "Kaydet"}
        </Button>
      </div>

      {/* Restaurant Info */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2"><Type className="w-4 h-4" /> Restoran Bilgileri</CardTitle>
          <CardDescription>Restoran adı ve sloganı</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label>Restoran Adı</Label>
            <Input value={settings.restaurant_name || ""} onChange={(e) => updateSetting("restaurant_name", e.target.value)} />
          </div>
          <div className="space-y-2">
            <Label>Slogan</Label>
            <Input value={settings.restaurant_slogan || ""} onChange={(e) => updateSetting("restaurant_slogan", e.target.value)} />
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label>Masa Sayısı</Label>
              <Input type="number" value={settings.table_count || "20"} onChange={(e) => updateSetting("table_count", e.target.value)} />
            </div>
            <div className="space-y-2">
              <Label>Para Birimi</Label>
              <Input value={settings.currency_symbol || "₺"} onChange={(e) => updateSetting("currency_symbol", e.target.value)} />
            </div>
          </div>
        </CardContent>
      </Card>

      {/* AI Settings */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2"><Bot className="w-4 h-4" /> AI Garson Ayarları</CardTitle>
          <CardDescription>Gemini API yapılandırması ve sistem promptu</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label className="flex items-center gap-2"><Key className="w-3 h-3" /> Gemini API Key</Label>
            <Input
              type="password"
              value={settings.gemini_api_key || ""}
              onChange={(e) => updateSetting("gemini_api_key", e.target.value)}
              placeholder="AIzaSy..."
            />
            <p className="text-[10px] text-muted-foreground">Google AI Studio&apos;dan alınabilir: aistudio.google.com</p>
          </div>
          <div className="space-y-2">
            <Label>AI Modeli</Label>
            <Input value={settings.ai_model || "gemini-2.0-flash"} onChange={(e) => updateSetting("ai_model", e.target.value)} />
          </div>
          <Separator />
          <div className="space-y-2">
            <Label>Sistem Promptu</Label>
            <Textarea
              value={settings.ai_system_prompt || ""}
              onChange={(e) => updateSetting("ai_system_prompt", e.target.value)}
              rows={10}
              className="font-mono text-xs"
            />
            <p className="text-[10px] text-muted-foreground">
              Kullanılabilir değişkenler: {"{restaurant_name}"}, {"{menu_data}"}
            </p>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}