"use client";

import * as React from "react";
import { useState, useRef, useEffect } from "react";
import { useUser } from "../user-context";
import { useRouter } from "next/navigation";
import { cn } from "@/lib/utils";
import {
  Settings,
  User,
  Bell,
  Shield,
  Database,
  Mail,
  Globe,
  Palette,
  Monitor,
  Moon,
  Sun,
  Check,
  ChevronDown,
  Search,
  X,
  Save,
  RotateCcw
} from "lucide-react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { Badge } from "@/components/ui/badge";
import { Textarea } from "@/components/ui/textarea";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

interface Tag {
  id: string;
  label: string;
  color?: string;
}

interface TagInputProps {
  onChange?: (tags: Array<Tag>) => void;
  defaultTags?: Array<Tag>;
  suggestions?: Array<Tag>;
  maxTags?: number;
  label?: string;
  placeholder?: string;
  error?: string;
}

function useTags({
  onChange,
  defaultTags = [],
  maxTags = 10,
}: {
  onChange?: (tags: Tag[]) => void;
  defaultTags?: Tag[];
  maxTags?: number;
}) {
  const [tags, setTags] = useState<Tag[]>(defaultTags);

  function addTag(tag: Tag) {
    if (tags.length >= maxTags) return;
    const newTags = [...tags, tag];
    setTags(newTags);
    onChange?.(newTags);
    return newTags;
  }

  function removeTag(tagId: string) {
    const newTags = tags.filter((t) => t.id !== tagId);
    setTags(newTags);
    onChange?.(newTags);
    return newTags;
  }

  function removeLastTag() {
    if (tags.length === 0) return;
    return removeTag(tags[tags.length - 1].id);
  }

  return {
    tags,
    setTags,
    addTag,
    removeTag,
    removeLastTag,
    hasReachedMax: tags.length >= maxTags,
  };
}

function useClickOutside<T extends HTMLElement = HTMLElement>(
  ref: React.RefObject<T>,
  handler: (event: MouseEvent | TouchEvent) => void,
  mouseEvent: 'mousedown' | 'mouseup' = 'mousedown'
): void {
  useEffect(() => {
    const listener = (event: MouseEvent | TouchEvent) => {
      const el = ref?.current;
      const target = event.target;

      if (!el || !target || el.contains(target as Node)) {
        return;
      }

      handler(event);
    };

    document.addEventListener(mouseEvent, listener);
    document.addEventListener('touchstart', listener);

    return () => {
      document.removeEventListener(mouseEvent, listener);
      document.removeEventListener('touchstart', listener);
    };
  }, [ref, handler, mouseEvent]);
}

const tagStyles = {
  base: "inline-flex items-center gap-1.5 px-2 py-0.5 text-sm rounded-md transition-colors duration-150",
  colors: {
    blue: "bg-blue-50 text-blue-700 border border-blue-200 hover:border-blue-300 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-700/30 dark:hover:border-blue-600/50",
    purple: "bg-purple-50 text-purple-700 border border-purple-200 hover:border-purple-300 dark:bg-purple-900/30 dark:text-purple-300 dark:border-purple-700/30 dark:hover:border-purple-600/50",
    green: "bg-green-50 text-green-700 border border-green-200 hover:border-green-300 dark:bg-green-900/30 dark:text-green-300 dark:border-green-700/30 dark:hover:border-green-600/50",
  },
};

function TagInput({
  onChange,
  defaultTags = [],
  suggestions = [
    { id: "nextjs", label: "Next.js" },
    { id: "react", label: "React" },
    { id: "tailwind", label: "Tailwind" },
  ],
  maxTags = 10,
  label = "Tags",
  placeholder = "Add tags...",
  error,
}: TagInputProps) {
  const { tags, addTag, removeTag, removeLastTag } = useTags({
    onChange,
    defaultTags,
    maxTags,
  });
  const [input, setInput] = useState("");
  const [isOpen, setIsOpen] = useState(false);
  const [selectedIndex, setSelectedIndex] = useState(0);
  const inputRef = useRef<HTMLInputElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  const filteredSuggestions = suggestions
    .filter(
      (suggestion: Tag) =>
        typeof suggestion.label === "string" &&
        typeof input === "string" &&
        suggestion.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 &&
        !tags.some((tag: Tag) => tag.id === suggestion.id)
    )
    .slice(0, 5);

  const canAddNewTag =
    input.length > 0 &&
    !suggestions.some((s) => s.label.toLowerCase() === input.toLowerCase());

  function handleKeyDown(e: React.KeyboardEvent) {
    if (e.key === "Backspace" && input === "" && tags.length > 0) {
      removeLastTag();
    } else if (e.key === "Enter" && input) {
      e.preventDefault();
      if (isOpen && filteredSuggestions[selectedIndex]) {
        addTag(filteredSuggestions[selectedIndex]);
        setInput("");
        setIsOpen(false);
      } else if (canAddNewTag) {
        addTag({ id: input, label: input });
        setInput("");
        setIsOpen(false);
      }
    } else if (e.key === "Escape") {
      setIsOpen(false);
    }
  }

  useClickOutside(containerRef as React.RefObject<HTMLElement>, () => setIsOpen(false));

  return (
    <div className="w-full space-y-2" ref={containerRef}>
      {label && (
        <Label className="text-sm font-medium text-foreground" htmlFor={label}>
          {label}
        </Label>
      )}

      <div
        className={cn(
          "min-h-[2.5rem] p-1.5 rounded-lg border border-border bg-background",
          "focus-within:ring-2 focus-within:ring-ring/20",
          "flex items-center flex-row flex-wrap gap-1.5 relative"
        )}
      >
        {tags.map((tag) => (
          <span
            key={tag.id}
            className={cn(
              tagStyles.base,
              tag.color || tagStyles.colors.blue
            )}
          >
            {tag.label}
            <button
              type="button"
              onClick={() => removeTag(tag.id)}
              className="text-current/60 hover:text-current transition-colors"
            >
              <X className="w-3.5 h-3.5" />
            </button>
          </span>
        ))}

        <input
          ref={inputRef}
          type="text"
          value={input}
          onChange={(e) => {
            setInput(e.target.value);
            setIsOpen(true);
            setSelectedIndex(0);
          }}
          onFocus={() => setIsOpen(true)}
          onKeyDown={handleKeyDown}
          placeholder={tags.length === 0 ? placeholder : ""}
          className="flex-1 min-w-[120px] bg-transparent h-7 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none"
        />

        {isOpen && (input || filteredSuggestions.length > 0) && (
          <div className="absolute left-0 right-0 top-full mt-1 z-50 max-h-[300px] overflow-y-auto bg-popover border border-border rounded-lg shadow-lg overflow-hidden">
            <div className="px-2 py-1.5 border-b border-border">
              <span className="text-xs font-medium text-muted-foreground">
                选择标签或创建新标签
              </span>
            </div>
            <div className="p-1.5 flex flex-wrap gap-1.5">
              {filteredSuggestions.map((suggestion, index) => (
                <button
                  type="button"
                  key={suggestion.id}
                  onClick={() => {
                    addTag(suggestion);
                    setInput("");
                    setIsOpen(false);
                  }}
                  className={cn(
                    tagStyles.base,
                    selectedIndex === index
                      ? tagStyles.colors.blue
                      : "bg-muted text-muted-foreground border border-border hover:border-border/80"
                  )}
                >
                  {suggestion.label}
                  {selectedIndex === index && <Check className="w-3.5 h-3.5" />}
                </button>
              ))}
              {canAddNewTag && (
                <button
                  type="button"
                  onClick={() => {
                    const colorKeys = Object.keys(tagStyles.colors) as Array<keyof typeof tagStyles.colors>;
                    const randomColor = tagStyles.colors[colorKeys[Math.floor(Math.random() * colorKeys.length)]];
                    addTag({
                      id: input,
                      label: input,
                      color: randomColor,
                    });
                    setInput("");
                    setIsOpen(false);
                  }}
                  className={cn(
                    tagStyles.base,
                    "bg-muted text-muted-foreground border border-border hover:border-border/80"
                  )}
                >
                  创建 "{input}"
                </button>
              )}
            </div>
          </div>
        )}
      </div>

      {error && (
        <p className="text-sm text-destructive">{error}</p>
      )}
    </div>
  );
}

interface SettingsSectionProps {
  icon: React.ReactNode;
  title: string;
  description: string;
  children: React.ReactNode;
}

function SettingsSection({ icon, title, description, children }: SettingsSectionProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-3">
          {icon}
          {title}
        </CardTitle>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        {children}
      </CardContent>
    </Card>
  );
}

interface SettingItemProps {
  label: string;
  description?: string;
  children: React.ReactNode;
  badge?: string;
}

function SettingItem({ label, description, children, badge }: SettingItemProps) {
  return (
    <div className="flex items-center justify-between">
      <div className="space-y-0.5">
        <div className="flex items-center gap-2">
          <Label className="text-sm font-medium">{label}</Label>
          {badge && <Badge variant="secondary" className="text-xs">{badge}</Badge>}
        </div>
        {description && (
          <p className="text-sm text-muted-foreground">{description}</p>
        )}
      </div>
      <div className="flex items-center space-x-2">
        {children}
      </div>
    </div>
  );
}

export default function MePage() {
  const { isLoading, user } = useUser();
  const router = useRouter();

  const [settings, setSettings] = useState({
    emailNotifications: true,
    pushNotifications: false,
    marketingEmails: true,
    twoFactorAuth: false,
    sessionTimeout: "30",
    theme: "system",
    language: "zh",
    timezone: "Asia/Shanghai",
    autoSave: true,
    dataRetention: "90",
    apiAccess: false,
    debugMode: false,
  });

  const [profile, setProfile] = useState({
    name: user?.name || "",
    email: user?.email || "",
    role: "用户",
    department: "IT",
    bio: "热爱技术的开发者，专注于创造优秀的用户体验。",
  });

  const [tags, setTags] = useState<Tag[]>([
    { id: "frontend", label: "前端开发", color: tagStyles.colors.blue },
    { id: "react", label: "React", color: tagStyles.colors.green },
  ]);

  // 认证检查已在 layout.tsx 中处理，无需在此重复检查

  useEffect(() => {
    if (user) {
      setProfile(prev => ({
        ...prev,
        name: user.name || "",
        email: user.email || "",
      }));
    }
  }, [user]);

  const handleSettingChange = (key: string, value: any) => {
    setSettings(prev => ({ ...prev, [key]: value }));
  };

  const handleProfileChange = (key: string, value: string) => {
    setProfile(prev => ({ ...prev, [key]: value }));
  };

  const handleSave = () => {
    // console.log("Settings saved:", settings);
    // console.log("Profile saved:", profile);
    // console.log("Tags saved:", tags);
    // TODO: 实际保存到后端
  };

  const handleReset = () => {
    setSettings({
      emailNotifications: true,
      pushNotifications: false,
      marketingEmails: true,
      twoFactorAuth: false,
      sessionTimeout: "30",
      theme: "system",
      language: "zh",
      timezone: "Asia/Shanghai",
      autoSave: true,
      dataRetention: "90",
      apiAccess: false,
      debugMode: false,
    });
  };

  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-screen">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-background">
      <div className="container mx-auto p-6 max-w-6xl">
        {/* Header */}
        <div className="mb-8">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-3xl font-bold text-foreground">个人设置</h1>
              <p className="text-muted-foreground mt-2">
                管理您的个人资料、偏好设置和账户安全
              </p>
            </div>
            <div className="flex items-center gap-3">
              <Button variant="outline" onClick={handleReset}>
                <RotateCcw className="w-4 h-4 mr-2" />
                重置
              </Button>
              <Button onClick={handleSave}>
                <Save className="w-4 h-4 mr-2" />
                保存设置
              </Button>
            </div>
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Profile Section */}
          <div className="lg:col-span-1">
            <SettingsSection
              icon={<User className="w-5 h-5 text-blue-600" />}
              title="个人资料"
              description="管理您的个人信息和账户设置"
            >
              <div className="flex items-center space-x-4 mb-6">
                <Avatar className="w-16 h-16">
                  <AvatarImage src={user?.avatar || "/placeholder-avatar.jpg"} />
                  <AvatarFallback className="text-lg font-semibold">
                    {profile.name.split(' ').map(n => n[0] || '用').join('').slice(0, 2)}
                  </AvatarFallback>
                </Avatar>
                <div>
                  <h3 className="font-semibold text-lg">{profile.name || '用户'}</h3>
                  <p className="text-sm text-muted-foreground">{profile.role}</p>
                  <Badge variant="outline" className="mt-1">{profile.department}</Badge>
                </div>
              </div>

              <div className="space-y-4">
                <div>
                  <Label htmlFor="name">姓名</Label>
                  <Input
                    id="name"
                    value={profile.name}
                    onChange={(e) => handleProfileChange('name', e.target.value)}
                    className="mt-1"
                  />
                </div>

                <div>
                  <Label htmlFor="email">邮箱</Label>
                  <Input
                    id="email"
                    type="email"
                    value={profile.email}
                    onChange={(e) => handleProfileChange('email', e.target.value)}
                    className="mt-1"
                  />
                </div>

                <div>
                  <Label htmlFor="department">部门</Label>
                  <Select value={profile.department} onValueChange={(value) => handleProfileChange('department', value)}>
                    <SelectTrigger className="mt-1">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="IT">信息技术部</SelectItem>
                      <SelectItem value="HR">人力资源部</SelectItem>
                      <SelectItem value="Finance">财务部</SelectItem>
                      <SelectItem value="Marketing">市场部</SelectItem>
                      <SelectItem value="Design">设计部</SelectItem>
                      <SelectItem value="Product">产品部</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <div>
                  <Label htmlFor="bio">个人简介</Label>
                  <Textarea
                    id="bio"
                    value={profile.bio}
                    onChange={(e) => handleProfileChange('bio', e.target.value)}
                    className="mt-1"
                    rows={3}
                  />
                </div>

                <div>
                  <TagInput
                    label="技能标签"
                    placeholder="添加技能标签..."
                    defaultTags={tags}
                    suggestions={[
                      { id: "javascript", label: "JavaScript" },
                      { id: "typescript", label: "TypeScript" },
                      { id: "python", label: "Python" },
                      { id: "react", label: "React" },
                      { id: "nextjs", label: "Next.js" },
                      { id: "nodejs", label: "Node.js" },
                      { id: "docker", label: "Docker" },
                      { id: "kubernetes", label: "Kubernetes" },
                      { id: "aws", label: "AWS" },
                      { id: "ui-design", label: "UI设计" },
                    ]}
                    onChange={setTags}
                    maxTags={8}
                  />
                </div>
              </div>
            </SettingsSection>
          </div>

          {/* Settings Sections */}
          <div className="lg:col-span-2 space-y-6">
            {/* Notification Settings */}
            <SettingsSection
              icon={<Bell className="w-5 h-5 text-green-600" />}
              title="通知设置"
              description="配置您希望接收的通知类型"
            >
              <SettingItem
                label="邮件通知"
                description="接收重要系统更新的邮件通知"
              >
                <Switch
                  checked={settings.emailNotifications}
                  onCheckedChange={(checked) => handleSettingChange('emailNotifications', checked)}
                />
              </SettingItem>

              <SettingItem
                label="推送通知"
                description="在浏览器中接收实时推送通知"
              >
                <Switch
                  checked={settings.pushNotifications}
                  onCheckedChange={(checked) => handleSettingChange('pushNotifications', checked)}
                />
              </SettingItem>

              <SettingItem
                label="营销邮件"
                description="接收产品更新和营销信息"
              >
                <Switch
                  checked={settings.marketingEmails}
                  onCheckedChange={(checked) => handleSettingChange('marketingEmails', checked)}
                />
              </SettingItem>
            </SettingsSection>

            {/* Security Settings */}
            <SettingsSection
              icon={<Shield className="w-5 h-5 text-red-600" />}
              title="安全设置"
              description="管理您的账户安全和访问控制"
            >
              <SettingItem
                label="双因素认证"
                description="为您的账户添加额外的安全层"
                badge="推荐"
              >
                <Switch
                  checked={settings.twoFactorAuth}
                  onCheckedChange={(checked) => handleSettingChange('twoFactorAuth', checked)}
                />
              </SettingItem>

              <SettingItem
                label="会话超时"
                description="设置自动登出的时间间隔"
              >
                <Select value={settings.sessionTimeout} onValueChange={(value) => handleSettingChange('sessionTimeout', value)}>
                  <SelectTrigger className="w-32">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="15">15分钟</SelectItem>
                    <SelectItem value="30">30分钟</SelectItem>
                    <SelectItem value="60">1小时</SelectItem>
                    <SelectItem value="120">2小时</SelectItem>
                  </SelectContent>
                </Select>
              </SettingItem>

              <SettingItem
                label="API访问"
                description="允许第三方应用访问您的数据"
              >
                <Switch
                  checked={settings.apiAccess}
                  onCheckedChange={(checked) => handleSettingChange('apiAccess', checked)}
                />
              </SettingItem>
            </SettingsSection>

            {/* System Preferences */}
            <SettingsSection
              icon={<Settings className="w-5 h-5 text-purple-600" />}
              title="系统偏好"
              description="自定义您的系统界面和行为"
            >
              <SettingItem
                label="主题"
                description="选择您偏好的界面主题"
              >
                <Select value={settings.theme} onValueChange={(value) => handleSettingChange('theme', value)}>
                  <SelectTrigger className="w-32">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="light">
                      <div className="flex items-center gap-2">
                        <Sun className="w-4 h-4" />
                        浅色
                      </div>
                    </SelectItem>
                    <SelectItem value="dark">
                      <div className="flex items-center gap-2">
                        <Moon className="w-4 h-4" />
                        深色
                      </div>
                    </SelectItem>
                    <SelectItem value="system">
                      <div className="flex items-center gap-2">
                        <Monitor className="w-4 h-4" />
                        系统
                      </div>
                    </SelectItem>
                  </SelectContent>
                </Select>
              </SettingItem>

              <SettingItem
                label="语言"
                description="选择界面显示语言"
              >
                <Select value={settings.language} onValueChange={(value) => handleSettingChange('language', value)}>
                  <SelectTrigger className="w-32">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="zh">中文</SelectItem>
                    <SelectItem value="en">English</SelectItem>
                    <SelectItem value="ja">日本語</SelectItem>
                    <SelectItem value="ko">한국어</SelectItem>
                  </SelectContent>
                </Select>
              </SettingItem>

              <SettingItem
                label="时区"
                description="设置您的本地时区"
              >
                <Select value={settings.timezone} onValueChange={(value) => handleSettingChange('timezone', value)}>
                  <SelectTrigger className="w-40">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="UTC">UTC</SelectItem>
                    <SelectItem value="Asia/Shanghai">Asia/Shanghai</SelectItem>
                    <SelectItem value="Asia/Tokyo">Asia/Tokyo</SelectItem>
                    <SelectItem value="America/New_York">America/New_York</SelectItem>
                    <SelectItem value="Europe/London">Europe/London</SelectItem>
                  </SelectContent>
                </Select>
              </SettingItem>

              <SettingItem
                label="自动保存"
                description="自动保存您的工作进度"
              >
                <Switch
                  checked={settings.autoSave}
                  onCheckedChange={(checked) => handleSettingChange('autoSave', checked)}
                />
              </SettingItem>
            </SettingsSection>

            {/* Data Management */}
            <SettingsSection
              icon={<Database className="w-5 h-5 text-orange-600" />}
              title="数据管理"
              description="管理您的数据存储和隐私设置"
            >
              <SettingItem
                label="数据保留期"
                description="设置数据自动删除的时间"
              >
                <Select value={settings.dataRetention} onValueChange={(value) => handleSettingChange('dataRetention', value)}>
                  <SelectTrigger className="w-32">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="30">30天</SelectItem>
                    <SelectItem value="90">90天</SelectItem>
                    <SelectItem value="180">180天</SelectItem>
                    <SelectItem value="365">1年</SelectItem>
                  </SelectContent>
                </Select>
              </SettingItem>

              <SettingItem
                label="调试模式"
                description="启用详细的系统日志记录"
                badge="开发"
              >
                <Switch
                  checked={settings.debugMode}
                  onCheckedChange={(checked) => handleSettingChange('debugMode', checked)}
                />
              </SettingItem>
            </SettingsSection>
          </div>
        </div>
      </div>
    </div>
  );
}