import { useState, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { X } from "lucide-react";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import type { SkillInfo } from "@/types/skill";

interface SkillEditDialogProps {
  skill: SkillInfo;
  onClose: () => void;
  onSave: (id: string, updates: Record<string, unknown>) => Promise<unknown>;
}

export function SkillEditDialog({ skill, onClose, onSave }: SkillEditDialogProps) {
  const { t } = useTranslation("skills");
  const [name, setName] = useState(skill.name);
  const [description, setDescription] = useState(skill.description);
  const [visibility, setVisibility] = useState(skill.visibility ?? "private");
  const [tags, setTags] = useState<string[]>(skill.tags ?? []);
  const [tagInput, setTagInput] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    setName(skill.name);
    setDescription(skill.description);
    setVisibility(skill.visibility ?? "private");
    setTags(skill.tags ?? []);
  }, [skill]);

  const addTag = () => {
    const tag = tagInput.trim().toLowerCase();
    if (tag && !tags.includes(tag)) {
      setTags([...tags, tag]);
    }
    setTagInput("");
  };

  const removeTag = (tag: string) => {
    setTags(tags.filter((t) => t !== tag));
  };

  const handleSave = async () => {
    if (!skill.id) return;
    setLoading(true);
    setError("");
    try {
      await onSave(skill.id, { name, description, visibility, tags });
      onClose();
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : t("edit.save"));
    } finally {
      setLoading(false);
    }
  };

  return (
    <Dialog open onOpenChange={() => onClose()}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>{t("edit.title")}</DialogTitle>
        </DialogHeader>

        <div className="flex flex-col gap-4">
          <div className="space-y-1.5">
            <Label htmlFor="skill-name">{t("edit.name")}</Label>
            <Input
              id="skill-name"
              value={name}
              onChange={(e) => setName(e.target.value)}
            />
          </div>

          <div className="space-y-1.5">
            <Label htmlFor="skill-desc">{t("edit.description")}</Label>
            <Textarea
              id="skill-desc"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              rows={3}
            />
          </div>

          <div className="space-y-1.5">
            <Label>{t("edit.visibility")}</Label>
            <Select value={visibility} onValueChange={setVisibility}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="private">{t("edit.privateOption")}</SelectItem>
                <SelectItem value="internal">{t("edit.internalOption")}</SelectItem>
                <SelectItem value="public">{t("edit.publicOption")}</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-1.5">
            <Label>{t("edit.tags")}</Label>
            <div className="flex gap-2">
              <Input
                value={tagInput}
                onChange={(e) => setTagInput(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === "Enter") { e.preventDefault(); addTag(); }
                }}
                placeholder={t("edit.addTag")}
                className="flex-1"
              />
              <Button type="button" variant="outline" size="sm" onClick={addTag}>
                {t("edit.add")}
              </Button>
            </div>
            {tags.length > 0 && (
              <div className="mt-2 flex flex-wrap gap-1">
                {tags.map((tag) => (
                  <Badge key={tag} variant="secondary" className="gap-1">
                    {tag}
                    <button type="button" onClick={() => removeTag(tag)} className="hover:text-destructive">
                      <X className="h-3 w-3" />
                    </button>
                  </Badge>
                ))}
              </div>
            )}
          </div>
        </div>

        {error && <p className="text-sm text-destructive">{error}</p>}

        <DialogFooter>
          <Button variant="outline" onClick={onClose} disabled={loading}>
            {t("edit.cancel")}
          </Button>
          <Button onClick={handleSave} disabled={loading || !name.trim()}>
            {loading ? t("edit.saving") : t("edit.save")}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
