"use client";

import { useState } from "react";
import { motion } from "motion/react";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Settings,
  User,
  Building2,
  Key,
  Bell,
  Palette,
  Save,
  CheckCircle,
} from "lucide-react";

const settingsTabs = [
  { key: "profile", label: "个人资料", icon: User },
  { key: "company", label: "企业信息", icon: Building2 },
  { key: "ai", label: "AI 配置", icon: Key },
  { key: "notifications", label: "通知设置", icon: Bell },
  { key: "appearance", label: "外观偏好", icon: Palette },
];

export default function SettingsPage() {
  const [activeTab, setActiveTab] = useState("profile");
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);

  const [profile, setProfile] = useState({
    name: "",
    email: "",
    phone: "",
  });

  const [company, setCompany] = useState({
    name: "",
    tax_id: "",
    contact: "",
    plan: "standard",
  });

  const [aiConfig, setAiConfig] = useState({
    provider: "zhipu",
    model: "glm-4",
    temperature: "0.3",
    max_tokens: "2000",
  });

  const [notifications, setNotifications] = useState({
    email_alert: true,
    exception_alert: true,
    weekly_report: false,
    cost_threshold: "10000",
  });

  const [appearance, setAppearance] = useState({
    theme: "system",
    density: "comfortable",
    language: "zh-CN",
  });

  function handleSave() {
    setSaving(true);
    setTimeout(() => {
      setSaving(false);
      setSaved(true);
      setTimeout(() => setSaved(false), 2000);
    }, 800);
  }

  return (
    <div className="min-h-full p-6 lg:p-8 max-w-7xl mx-auto space-y-6">
      <motion.div
        initial={{ opacity: 0, y: -8 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
      >
        <h1 className="text-heading-1 text-foreground">系统设置</h1>
        <p className="text-muted-foreground mt-1">管理个人资料、企业信息和系统配置</p>
      </motion.div>

      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
        {/* Settings Nav */}
        <motion.div
          initial={{ opacity: 0, x: -8 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.3 }}
        >
          <Card>
            <CardContent className="p-3">
              <nav className="space-y-1">
                {settingsTabs.map((tab) => {
                  const Icon = tab.icon;
                  return (
                    <button
                      key={tab.key}
                      onClick={() => setActiveTab(tab.key)}
                      className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all text-sm font-medium ${
                        activeTab === tab.key
                          ? "bg-primary/10 text-primary"
                          : "text-muted-foreground hover:bg-accent hover:text-foreground"
                      }`}
                    >
                      <Icon className="w-4 h-4 shrink-0" />
                      {tab.label}
                    </button>
                  );
                })}
              </nav>
            </CardContent>
          </Card>
        </motion.div>

        {/* Settings Content */}
        <motion.div
          initial={{ opacity: 0, y: 8 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.4, delay: 0.1 }}
          className="lg:col-span-3"
        >
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <CardTitle className="text-lg font-medium">
                  {settingsTabs.find((t) => t.key === activeTab)?.label}
                </CardTitle>
                <Button onClick={handleSave} disabled={saving} className="btn-press" size="sm">
                  {saving ? (
                    <span className="flex items-center gap-2">
                      <svg className="animate-spin w-4 h-4" viewBox="0 0 24 24">
                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
                      </svg>
                      保存中
                    </span>
                  ) : saved ? (
                    <span className="flex items-center gap-2">
                      <CheckCircle className="w-4 h-4" />
                      已保存
                    </span>
                  ) : (
                    <span className="flex items-center gap-2">
                      <Save className="w-4 h-4" />
                      保存
                    </span>
                  )}
                </Button>
              </div>
            </CardHeader>
            <CardContent className="space-y-6">
              {activeTab === "profile" && (
                <div className="space-y-4">
                  <div>
                    <label className="text-caption text-muted-foreground mb-1.5 block">姓名</label>
                    <Input
                      value={profile.name}
                      onChange={(e) => setProfile({ ...profile, name: e.target.value })}
                      placeholder="请输入姓名"
                    />
                  </div>
                  <div>
                    <label className="text-caption text-muted-foreground mb-1.5 block">邮箱</label>
                    <Input
                      type="email"
                      value={profile.email}
                      onChange={(e) => setProfile({ ...profile, email: e.target.value })}
                      placeholder="user@example.com"
                    />
                  </div>
                  <div>
                    <label className="text-caption text-muted-foreground mb-1.5 block">手机号</label>
                    <Input
                      value={profile.phone}
                      onChange={(e) => setProfile({ ...profile, phone: e.target.value })}
                      placeholder="138****1234"
                    />
                  </div>
                </div>
              )}

              {activeTab === "company" && (
                <div className="space-y-4">
                  <div>
                    <label className="text-caption text-muted-foreground mb-1.5 block">企业名称</label>
                    <Input
                      value={company.name}
                      onChange={(e) => setCompany({ ...company, name: e.target.value })}
                      placeholder="请输入企业名称"
                    />
                  </div>
                  <div>
                    <label className="text-caption text-muted-foreground mb-1.5 block">税号</label>
                    <Input
                      value={company.tax_id}
                      onChange={(e) => setCompany({ ...company, tax_id: e.target.value })}
                      placeholder="请输入统一社会信用代码"
                    />
                  </div>
                  <div>
                    <label className="text-caption text-muted-foreground mb-1.5 block">联系人</label>
                    <Input
                      value={company.contact}
                      onChange={(e) => setCompany({ ...company, contact: e.target.value })}
                      placeholder="请输入联系人姓名"
                    />
                  </div>
                  <div>
                    <label className="text-caption text-muted-foreground mb-1.5 block">套餐类型</label>
                    <Select value={company.plan} onValueChange={(v) => setCompany({ ...company, plan: v })}>
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="free">免费版</SelectItem>
                        <SelectItem value="standard">标准版</SelectItem>
                        <SelectItem value="professional">专业版</SelectItem>
                        <SelectItem value="enterprise">企业版</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              )}

              {activeTab === "ai" && (
                <div className="space-y-4">
                  <div>
                    <label className="text-caption text-muted-foreground mb-1.5 block">AI 服务商</label>
                    <Select value={aiConfig.provider} onValueChange={(v) => setAiConfig({ ...aiConfig, provider: v })}>
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="zhipu">智谱 AI (GLM-4)</SelectItem>
                        <SelectItem value="openai">OpenAI (GPT-4)</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div>
                    <label className="text-caption text-muted-foreground mb-1.5 block">模型</label>
                    <Input
                      value={aiConfig.model}
                      onChange={(e) => setAiConfig({ ...aiConfig, model: e.target.value })}
                      placeholder="glm-4 / gpt-4-turbo-preview"
                    />
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="text-caption text-muted-foreground mb-1.5 block">Temperature</label>
                      <Input
                        value={aiConfig.temperature}
                        onChange={(e) => setAiConfig({ ...aiConfig, temperature: e.target.value })}
                        placeholder="0.3"
                      />
                    </div>
                    <div>
                      <label className="text-caption text-muted-foreground mb-1.5 block">Max Tokens</label>
                      <Input
                        value={aiConfig.max_tokens}
                        onChange={(e) => setAiConfig({ ...aiConfig, max_tokens: e.target.value })}
                        placeholder="2000"
                      />
                    </div>
                  </div>
                  <div className="p-4 rounded-lg bg-amber-50 dark:bg-amber-950/30">
                    <p className="text-sm text-amber-700 dark:text-amber-400">
                      API Key 在 .env 文件中配置，不建议在此页面修改。
                    </p>
                  </div>
                </div>
              )}

              {activeTab === "notifications" && (
                <div className="space-y-4">
                  <div className="flex items-center justify-between p-4 rounded-lg border border-border">
                    <div>
                      <p className="font-medium text-foreground">邮件通知</p>
                      <p className="text-caption text-muted-foreground">接收任务完成、异常提醒等邮件</p>
                    </div>
                    <Button
                      variant={notifications.email_alert ? "default" : "outline"}
                      size="sm"
                      onClick={() => setNotifications({ ...notifications, email_alert: !notifications.email_alert })}
                    >
                      {notifications.email_alert ? "已开启" : "已关闭"}
                    </Button>
                  </div>
                  <div className="flex items-center justify-between p-4 rounded-lg border border-border">
                    <div>
                      <p className="font-medium text-foreground">异常提醒</p>
                      <p className="text-caption text-muted-foreground">检测到异常时发送通知</p>
                    </div>
                    <Button
                      variant={notifications.exception_alert ? "default" : "outline"}
                      size="sm"
                      onClick={() => setNotifications({ ...notifications, exception_alert: !notifications.exception_alert })}
                    >
                      {notifications.exception_alert ? "已开启" : "已关闭"}
                    </Button>
                  </div>
                  <div className="flex items-center justify-between p-4 rounded-lg border border-border">
                    <div>
                      <p className="font-medium text-foreground">周报</p>
                      <p className="text-caption text-muted-foreground">每周一发送成本分析周报</p>
                    </div>
                    <Button
                      variant={notifications.weekly_report ? "default" : "outline"}
                      size="sm"
                      onClick={() => setNotifications({ ...notifications, weekly_report: !notifications.weekly_report })}
                    >
                      {notifications.weekly_report ? "已开启" : "已关闭"}
                    </Button>
                  </div>
                  <div>
                    <label className="text-caption text-muted-foreground mb-1.5 block">成本预警阈值（元）</label>
                    <Input
                      value={notifications.cost_threshold}
                      onChange={(e) => setNotifications({ ...notifications, cost_threshold: e.target.value })}
                      placeholder="10000"
                    />
                    <p className="text-caption text-muted-foreground mt-1">当月成本超过此值时发送预警</p>
                  </div>
                </div>
              )}

              {activeTab === "appearance" && (
                <div className="space-y-4">
                  <div>
                    <label className="text-caption text-muted-foreground mb-1.5 block">主题</label>
                    <Select value={appearance.theme} onValueChange={(v) => setAppearance({ ...appearance, theme: v })}>
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="light">浅色</SelectItem>
                        <SelectItem value="dark">深色</SelectItem>
                        <SelectItem value="system">跟随系统</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div>
                    <label className="text-caption text-muted-foreground mb-1.5 block">界面密度</label>
                    <Select value={appearance.density} onValueChange={(v) => setAppearance({ ...appearance, density: v })}>
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="comfortable">舒适</SelectItem>
                        <SelectItem value="compact">紧凑</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div>
                    <label className="text-caption text-muted-foreground mb-1.5 block">语言</label>
                    <Select value={appearance.language} onValueChange={(v) => setAppearance({ ...appearance, language: v })}>
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="zh-CN">简体中文</SelectItem>
                        <SelectItem value="en">English</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>
        </motion.div>
      </div>
    </div>
  );
}