"use client";

import { useEffect, useState, useCallback } from "react";
import AdminLayout from "@/components/admin/AdminLayout";
import {
  PlusIcon,
  EditIcon,
  TrashIcon,
  CheckIcon,
  XIcon,
  SpinnerIcon,
  CodeIcon,
} from "@/components/Icons";

interface Skill {
  id: number;
  name: string;
  category: string | null;
  proficiency: number | null;
  yearsOfExperience: number | null;
  icon: string | null;
  color: string | null;
  sortOrder: number | null;
}

const skillCategories = [
  "Backend",
  "Frontend",
  "Database",
  "DevOps",
  "Cloud",
  "Mobile",
  "AI/ML",
  "Automation",
  "CMS",
  "Other",
];

const colorOptions = [
  { value: "#3b82f6", label: "Blue" },
  { value: "#8b5cf6", label: "Purple" },
  { value: "#06b6d4", label: "Cyan" },
  { value: "#10b981", label: "Green" },
  { value: "#f59e0b", label: "Amber" },
  { value: "#ef4444", label: "Red" },
  { value: "#ec4899", label: "Pink" },
  { value: "#a855f7", label: "Violet" },
  { value: "#777bb4", label: "PHP Purple" },
  { value: "#ff2d20", label: "Laravel Red" },
];

export default function SkillsPage() {
  const [skills, setSkills] = useState<Skill[]>([]);
  const [loading, setLoading] = useState(true);
  const [showForm, setShowForm] = useState(false);
  const [editing, setEditing] = useState<Skill | null>(null);
  const [saving, setSaving] = useState(false);
  const [filterCategory, setFilterCategory] = useState("");

  const [formData, setFormData] = useState({
    name: "",
    category: "Backend",
    proficiency: 80,
    yearsOfExperience: 1,
    color: "#3b82f6",
  });

  const fetchSkills = useCallback(async () => {
    try {
      const res = await fetch("/api/admin/skills");
      if (res.ok) {
        const data = await res.json();
        setSkills(data.skills);
      }
    } catch (e) {
      console.error(e);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchSkills();
  }, [fetchSkills]);

  const openForm = (skill?: Skill) => {
    if (skill) {
      setEditing(skill);
      setFormData({
        name: skill.name,
        category: skill.category || "Backend",
        proficiency: skill.proficiency || 80,
        yearsOfExperience: skill.yearsOfExperience || 1,
        color: skill.color || "#3b82f6",
      });
    } else {
      setEditing(null);
      setFormData({
        name: "",
        category: "Backend",
        proficiency: 80,
        yearsOfExperience: 1,
        color: "#3b82f6",
      });
    }
    setShowForm(true);
  };

  const handleSave = async (e: React.FormEvent) => {
    e.preventDefault();
    setSaving(true);

    try {
      const url = editing
        ? `/api/admin/skills/${editing.id}`
        : "/api/admin/skills";
      const method = editing ? "PUT" : "POST";

      const res = await fetch(url, {
        method,
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(formData),
      });

      if (res.ok) {
        setShowForm(false);
        fetchSkills();
      }
    } catch (e) {
      console.error(e);
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async (id: number) => {
    if (!confirm("Delete this skill?")) return;

    try {
      await fetch(`/api/admin/skills/${id}`, { method: "DELETE" });
      setSkills(skills.filter((s) => s.id !== id));
    } catch (e) {
      console.error(e);
    }
  };

  const filteredSkills = filterCategory
    ? skills.filter((s) => s.category === filterCategory)
    : skills;

  const groupedSkills = filteredSkills.reduce<Record<string, Skill[]>>(
    (acc, skill) => {
      const cat = skill.category || "Other";
      if (!acc[cat]) acc[cat] = [];
      acc[cat].push(skill);
      return acc;
    },
    {}
  );

  return (
    <AdminLayout>
      <div className="space-y-6">
        {/* Header */}
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
          <div>
            <h1 className="text-2xl font-bold text-text-primary">Skills</h1>
            <p className="text-text-muted mt-1">
              Manage your technical skills and proficiency levels
            </p>
          </div>
          <button
            onClick={() => openForm()}
            className="px-4 py-2.5 bg-gradient-to-r from-primary to-primary-light text-white font-semibold rounded-xl hover:shadow-lg hover:shadow-primary/25 transition-all flex items-center gap-2 text-sm"
          >
            <PlusIcon size={16} />
            Add Skill
          </button>
        </div>

        {/* Filter */}
        <div className="flex flex-wrap gap-2">
          <button
            onClick={() => setFilterCategory("")}
            className={`px-4 py-2 text-sm rounded-xl transition-colors ${
              !filterCategory
                ? "bg-primary text-white"
                : "bg-surface-elevated text-text-muted hover:text-text-primary border border-border"
            }`}
          >
            All ({skills.length})
          </button>
          {skillCategories.map((cat) => {
            const count = skills.filter((s) => s.category === cat).length;
            if (count === 0) return null;
            return (
              <button
                key={cat}
                onClick={() => setFilterCategory(cat)}
                className={`px-4 py-2 text-sm rounded-xl transition-colors ${
                  filterCategory === cat
                    ? "bg-primary text-white"
                    : "bg-surface-elevated text-text-muted hover:text-text-primary border border-border"
                }`}
              >
                {cat} ({count})
              </button>
            );
          })}
        </div>

        {/* Skills */}
        {loading ? (
          <div className="py-20 text-center">
            <SpinnerIcon size={40} className="text-primary mx-auto" />
          </div>
        ) : skills.length === 0 ? (
          <div className="glass rounded-xl p-12 text-center">
            <CodeIcon size={48} className="text-text-muted mx-auto mb-4" />
            <p className="text-text-muted text-lg mb-4">No skills added yet</p>
            <button
              onClick={() => openForm()}
              className="inline-flex items-center gap-1 text-primary-light hover:text-accent"
            >
              <PlusIcon size={14} /> Add your first skill
            </button>
          </div>
        ) : (
          <div className="space-y-8">
            {Object.entries(groupedSkills).map(([category, catSkills]) => (
              <div key={category}>
                <h3 className="text-sm font-semibold text-text-muted uppercase tracking-wider mb-4">
                  {category}
                </h3>
                <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
                  {catSkills.map((skill) => (
                    <div
                      key={skill.id}
                      className="glass rounded-xl p-5 group relative overflow-hidden"
                    >
                      {/* Color bar */}
                      <div
                        className="absolute top-0 left-0 right-0 h-1"
                        style={{ backgroundColor: skill.color || "#6366f1" }}
                      />

                      <div className="flex items-start justify-between mb-3">
                        <div>
                          <h4 className="font-bold text-text-primary">
                            {skill.name}
                          </h4>
                          {skill.yearsOfExperience && (
                            <p className="text-xs text-text-muted">
                              {skill.yearsOfExperience}+ years
                            </p>
                          )}
                        </div>
                        <span
                          className="text-sm font-bold"
                          style={{ color: skill.color || "#6366f1" }}
                        >
                          {skill.proficiency}%
                        </span>
                      </div>

                      {/* Progress bar */}
                      <div className="h-2 bg-surface rounded-full overflow-hidden mb-4">
                        <div
                          className="h-full rounded-full transition-all duration-500"
                          style={{
                            width: `${skill.proficiency}%`,
                            backgroundColor: skill.color || "#6366f1",
                          }}
                        />
                      </div>

                      {/* Actions */}
                      <div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                        <button
                          onClick={() => openForm(skill)}
                          className="flex-1 py-1.5 text-xs font-medium text-text-secondary hover:text-primary-light rounded-lg hover:bg-white/5 transition-colors flex items-center justify-center gap-1"
                        >
                          <EditIcon size={12} /> Edit
                        </button>
                        <button
                          onClick={() => handleDelete(skill.id)}
                          className="flex-1 py-1.5 text-xs font-medium text-text-secondary hover:text-danger rounded-lg hover:bg-danger/10 transition-colors flex items-center justify-center gap-1"
                        >
                          <TrashIcon size={12} /> Delete
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        )}

        {/* Form Modal */}
        {showForm && (
          <div
            className="fixed inset-0 z-50 bg-black/80 flex items-center justify-center p-4"
            onClick={(e) => {
              if (e.target === e.currentTarget) setShowForm(false);
            }}
          >
            <div className="bg-surface-card rounded-2xl w-full max-w-md max-h-[90vh] overflow-y-auto border border-border">
              <div className="sticky top-0 bg-surface-card border-b border-border p-6 flex items-center justify-between">
                <h2 className="text-lg font-bold text-text-primary">
                  {editing ? "Edit Skill" : "Add Skill"}
                </h2>
                <button
                  onClick={() => setShowForm(false)}
                  className="p-2 text-text-muted hover:text-text-primary rounded-lg"
                >
                  <XIcon size={18} />
                </button>
              </div>

              <form onSubmit={handleSave} className="p-6 space-y-5">
                <div>
                  <label className="block text-sm font-medium text-text-secondary mb-1.5">
                    Skill Name *
                  </label>
                  <input
                    type="text"
                    required
                    value={formData.name}
                    onChange={(e) =>
                      setFormData({ ...formData, name: e.target.value })
                    }
                    placeholder="e.g., PHP, Laravel, React"
                    className="w-full"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-text-secondary mb-1.5">
                    Category
                  </label>
                  <select
                    value={formData.category}
                    onChange={(e) =>
                      setFormData({ ...formData, category: e.target.value })
                    }
                    className="w-full"
                  >
                    {skillCategories.map((cat) => (
                      <option key={cat} value={cat}>
                        {cat}
                      </option>
                    ))}
                  </select>
                </div>

                <div>
                  <label className="block text-sm font-medium text-text-secondary mb-1.5">
                    Proficiency: {formData.proficiency}%
                  </label>
                  <input
                    type="range"
                    min="10"
                    max="100"
                    step="5"
                    value={formData.proficiency}
                    onChange={(e) =>
                      setFormData({
                        ...formData,
                        proficiency: parseInt(e.target.value),
                      })
                    }
                    className="w-full"
                  />
                  <div className="flex justify-between text-xs text-text-muted mt-1">
                    <span>Beginner</span>
                    <span>Intermediate</span>
                    <span>Expert</span>
                  </div>
                </div>

                <div>
                  <label className="block text-sm font-medium text-text-secondary mb-1.5">
                    Years of Experience
                  </label>
                  <input
                    type="number"
                    min="0"
                    max="30"
                    value={formData.yearsOfExperience}
                    onChange={(e) =>
                      setFormData({
                        ...formData,
                        yearsOfExperience: parseInt(e.target.value),
                      })
                    }
                    className="w-full"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-text-secondary mb-1.5">
                    Color
                  </label>
                  <div className="flex items-center gap-2">
                    <input
                      type="color"
                      value={formData.color}
                      onChange={(e) =>
                        setFormData({ ...formData, color: e.target.value })
                      }
                      className="w-10 h-10 rounded-lg cursor-pointer"
                    />
                    <div className="flex flex-wrap gap-1 flex-1">
                      {colorOptions.map((opt) => (
                        <button
                          key={opt.value}
                          type="button"
                          onClick={() =>
                            setFormData({ ...formData, color: opt.value })
                          }
                          className={`w-6 h-6 rounded-lg transition-transform ${
                            formData.color === opt.value
                              ? "scale-110 ring-2 ring-white"
                              : "hover:scale-105"
                          }`}
                          style={{ backgroundColor: opt.value }}
                          title={opt.label}
                        />
                      ))}
                    </div>
                  </div>
                </div>

                <div className="flex justify-end gap-3 pt-4 border-t border-border">
                  <button
                    type="button"
                    onClick={() => setShowForm(false)}
                    className="px-5 py-2.5 border border-border text-text-secondary rounded-xl hover:bg-white/5 transition-colors text-sm"
                  >
                    Cancel
                  </button>
                  <button
                    type="submit"
                    disabled={saving}
                    className="px-5 py-2.5 bg-primary text-white font-semibold rounded-xl hover:bg-primary-dark transition-colors flex items-center gap-2 text-sm disabled:opacity-50"
                  >
                    {saving ? (
                      <>
                        <SpinnerIcon size={16} />
                        Saving...
                      </>
                    ) : (
                      <>
                        <CheckIcon size={16} />
                        {editing ? "Update" : "Create"}
                      </>
                    )}
                  </button>
                </div>
              </form>
            </div>
          </div>
        )}
      </div>
    </AdminLayout>
  );
}