"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 Experience {
  id: number;
  company: string;
  companyLogo: string | null;
  companyUrl: string | null;
  role: string;
  description: string | null;
  achievements: string | null;
  location: string | null;
  employmentType: string | null;
  startDate: string;
  endDate: string | null;
  current: boolean | null;
  sortOrder: number | null;
}

const employmentTypes = [
  { value: "Full-time", label: "Full-time" },
  { value: "Part-time", label: "Part-time" },
  { value: "Contract", label: "Contract" },
  { value: "Freelance", label: "Freelance" },
  { value: "Self-employed", label: "Self-employed" },
  { value: "Internship", label: "Internship" },
];

export default function ExperiencePage() {
  const [experiences, setExperiences] = useState<Experience[]>([]);
  const [loading, setLoading] = useState(true);
  const [showForm, setShowForm] = useState(false);
  const [editing, setEditing] = useState<Experience | null>(null);
  const [saving, setSaving] = useState(false);

  const [formData, setFormData] = useState({
    company: "",
    companyUrl: "",
    role: "",
    description: "",
    achievements: "",
    location: "",
    employmentType: "Full-time",
    startDate: "",
    endDate: "",
    current: false,
  });

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

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

  const openForm = (exp?: Experience) => {
    if (exp) {
      setEditing(exp);
      setFormData({
        company: exp.company,
        companyUrl: exp.companyUrl || "",
        role: exp.role,
        description: exp.description || "",
        achievements: exp.achievements || "",
        location: exp.location || "",
        employmentType: exp.employmentType || "Full-time",
        startDate: exp.startDate,
        endDate: exp.endDate || "",
        current: exp.current || false,
      });
    } else {
      setEditing(null);
      setFormData({
        company: "",
        companyUrl: "",
        role: "",
        description: "",
        achievements: "",
        location: "",
        employmentType: "Full-time",
        startDate: "",
        endDate: "",
        current: false,
      });
    }
    setShowForm(true);
  };

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

    try {
      const url = editing
        ? `/api/admin/experience/${editing.id}`
        : "/api/admin/experience";
      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);
        fetchExperiences();
      }
    } catch (e) {
      console.error(e);
    } finally {
      setSaving(false);
    }
  };

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

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

  return (
    <AdminLayout>
      <div className="space-y-6">
        {/* Header */}
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold text-text-primary">Experience</h1>
            <p className="text-text-muted mt-1">
              Manage your work experience timeline
            </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 Experience
          </button>
        </div>

        {/* Timeline */}
        {loading ? (
          <div className="py-20 text-center">
            <SpinnerIcon size={40} className="text-primary mx-auto" />
          </div>
        ) : experiences.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 experience 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 experience
            </button>
          </div>
        ) : (
          <div className="relative">
            {/* Timeline line */}
            <div className="absolute left-6 top-0 bottom-0 w-0.5 bg-gradient-to-b from-primary via-accent to-transparent hidden md:block" />

            <div className="space-y-6">
              {experiences.map((exp, index) => (
                <div
                  key={exp.id}
                  className="relative md:pl-16 group"
                >
                  {/* Timeline dot */}
                  <div
                    className={`hidden md:flex absolute left-4 top-6 w-4 h-4 rounded-full border-2 transition-all ${
                      exp.current
                        ? "bg-accent border-accent shadow-lg shadow-accent/30"
                        : "bg-surface border-primary group-hover:bg-primary"
                    }`}
                  />

                  <div className="glass rounded-xl p-6 card-hover">
                    <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
                      <div className="flex items-start gap-4">
                        <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-primary/20 to-accent/20 flex items-center justify-center text-2xl shrink-0">
                          💼
                        </div>
                        <div>
                          <div className="flex items-center gap-2 flex-wrap">
                            <h3 className="font-bold text-text-primary">
                              {exp.role}
                            </h3>
                            {exp.current && (
                              <span className="px-2 py-0.5 text-[10px] bg-accent/10 text-accent rounded font-semibold">
                                Current
                              </span>
                            )}
                          </div>
                          <p className="text-primary-light font-medium">
                            {exp.company}
                          </p>
                          <div className="flex items-center gap-3 mt-1 text-sm text-text-muted flex-wrap">
                            <span>
                              {exp.startDate} — {exp.endDate || "Present"}
                            </span>
                            {exp.location && (
                              <>
                                <span>•</span>
                                <span>📍 {exp.location}</span>
                              </>
                            )}
                            {exp.employmentType && (
                              <>
                                <span>•</span>
                                <span>{exp.employmentType}</span>
                              </>
                            )}
                          </div>
                        </div>
                      </div>

                      <div className="flex items-center gap-2 shrink-0">
                        <button
                          onClick={() => openForm(exp)}
                          className="p-2 text-text-muted hover:text-primary-light rounded-lg hover:bg-white/5 transition-colors"
                        >
                          <EditIcon size={16} />
                        </button>
                        <button
                          onClick={() => handleDelete(exp.id)}
                          className="p-2 text-text-muted hover:text-danger rounded-lg hover:bg-danger/10 transition-colors"
                        >
                          <TrashIcon size={16} />
                        </button>
                      </div>
                    </div>

                    {exp.description && (
                      <p className="text-text-secondary text-sm mt-4 leading-relaxed">
                        {exp.description}
                      </p>
                    )}

                    {exp.achievements && (
                      <div className="mt-4 pt-4 border-t border-border">
                        <p className="text-xs font-semibold text-text-muted uppercase tracking-wider mb-2">
                          Key Achievements
                        </p>
                        <div className="flex flex-wrap gap-2">
                          {exp.achievements.split(",").map((achievement, i) => (
                            <span
                              key={i}
                              className="px-2.5 py-1 text-xs bg-success/10 text-success rounded-lg"
                            >
                              ✓ {achievement.trim()}
                            </span>
                          ))}
                        </div>
                      </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-2xl 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 Experience" : "Add Experience"}
                </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 className="grid sm:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-text-secondary mb-1.5">
                      Company *
                    </label>
                    <input
                      type="text"
                      required
                      value={formData.company}
                      onChange={(e) =>
                        setFormData({ ...formData, company: e.target.value })
                      }
                      placeholder="Company name"
                      className="w-full"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-text-secondary mb-1.5">
                      Company URL
                    </label>
                    <input
                      type="url"
                      value={formData.companyUrl}
                      onChange={(e) =>
                        setFormData({ ...formData, companyUrl: e.target.value })
                      }
                      placeholder="https://company.com"
                      className="w-full"
                    />
                  </div>
                </div>

                <div>
                  <label className="block text-sm font-medium text-text-secondary mb-1.5">
                    Role/Position *
                  </label>
                  <input
                    type="text"
                    required
                    value={formData.role}
                    onChange={(e) =>
                      setFormData({ ...formData, role: e.target.value })
                    }
                    placeholder="Software Developer"
                    className="w-full"
                  />
                </div>

                <div className="grid sm:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-text-secondary mb-1.5">
                      Location
                    </label>
                    <input
                      type="text"
                      value={formData.location}
                      onChange={(e) =>
                        setFormData({ ...formData, location: e.target.value })
                      }
                      placeholder="Lagos, Nigeria"
                      className="w-full"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-text-secondary mb-1.5">
                      Employment Type
                    </label>
                    <select
                      value={formData.employmentType}
                      onChange={(e) =>
                        setFormData({ ...formData, employmentType: e.target.value })
                      }
                      className="w-full"
                    >
                      {employmentTypes.map((type) => (
                        <option key={type.value} value={type.value}>
                          {type.label}
                        </option>
                      ))}
                    </select>
                  </div>
                </div>

                <div className="grid sm:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-text-secondary mb-1.5">
                      Start Date *
                    </label>
                    <input
                      type="text"
                      required
                      value={formData.startDate}
                      onChange={(e) =>
                        setFormData({ ...formData, startDate: e.target.value })
                      }
                      placeholder="2020 or Jan 2020"
                      className="w-full"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-text-secondary mb-1.5">
                      End Date
                    </label>
                    <input
                      type="text"
                      value={formData.endDate}
                      onChange={(e) =>
                        setFormData({ ...formData, endDate: e.target.value })
                      }
                      placeholder="2023 or Present"
                      disabled={formData.current}
                      className="w-full disabled:opacity-50"
                    />
                  </div>
                </div>

                <label className="flex items-center gap-2 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={formData.current}
                    onChange={(e) =>
                      setFormData({
                        ...formData,
                        current: e.target.checked,
                        endDate: e.target.checked ? "" : formData.endDate,
                      })
                    }
                    className="w-4 h-4 rounded"
                  />
                  <span className="text-sm text-text-secondary">
                    I currently work here
                  </span>
                </label>

                <div>
                  <label className="block text-sm font-medium text-text-secondary mb-1.5">
                    Description
                  </label>
                  <textarea
                    rows={3}
                    value={formData.description}
                    onChange={(e) =>
                      setFormData({ ...formData, description: e.target.value })
                    }
                    placeholder="Describe your role and responsibilities..."
                    className="w-full"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-text-secondary mb-1.5">
                    Key Achievements (comma-separated)
                  </label>
                  <input
                    type="text"
                    value={formData.achievements}
                    onChange={(e) =>
                      setFormData({ ...formData, achievements: e.target.value })
                    }
                    placeholder="Led team of 5, Increased revenue by 50%, Built new platform"
                    className="w-full"
                  />
                </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>
  );
}