"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { createExperience, updateExperience } from "@/lib/actions/experience";
import {
  Save,
  ChevronLeft,
  Briefcase,
  Layers,
  Building2,
  Calendar,
  Layers as TechIcon,
  Trash2,
  Plus,
  X,
  ListIcon,
} from "lucide-react";
import Link from "next/link";
import { cn } from "@/lib/utils";

interface ExperienceFormProps {
  initialData?: any;
}

export function ExperienceForm({ initialData }: ExperienceFormProps) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [highlights, setHighlights] = useState<string[]>(
    initialData?.highlights || [],
  );
  const [highlightInput, setHighlightInput] = useState("");
  const [techStack, setTechStack] = useState<string[]>(
    initialData?.techStack || [],
  );
  const [techInput, setTechInput] = useState("");

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setLoading(true);

    try {
      const formData = new FormData(e.currentTarget);
      const data = {
        company: formData.get("company") as string,
        role: formData.get("role") as string,
        startDate: new Date(formData.get("startDate") as string),
        endDate: formData.get("endDate") ? new Date(formData.get("endDate") as string) : null,
        current: formData.get("current") === "on",
        description: formData.get("description") as string,
        highlights: highlights,
        techStack: techStack,
        order: parseInt(formData.get("order") as string) || 0,
      };

      if (initialData) {
        await updateExperience(initialData.id, data);
      } else {
        await createExperience(data);
      }

      router.push("/dashboard/experience");
      router.refresh();
    } catch (error) {
      console.error(error);
      alert("Something went wrong.");
    } finally {
      setLoading(false);
    }
  }

  const addHighlight = () => {
    if (highlightInput && !highlights.includes(highlightInput)) {
      setHighlights([...highlights, highlightInput]);
      setHighlightInput("");
    }
  };

  const removeHighlight = (h: string) => {
    setHighlights(highlights.filter((t) => t !== h));
  };

  const addTech = () => {
    if (techInput && !techStack.includes(techInput)) {
      setTechStack([...techStack, techInput]);
      setTechInput("");
    }
  };

  const removeTech = (t: string) => {
    setTechStack(techStack.filter((tech) => tech !== t));
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-8 max-w-5xl mx-auto pb-20">
      <div className="flex items-center justify-between gap-4 border-b border-border pb-6">
        <div className="flex items-center gap-4">
          <Link
            href="/dashboard/experience"
            className="p-2 hover:bg-surface-elevated rounded-lg text-foreground-muted transition-colors"
          >
            <ChevronLeft size={20} />
          </Link>
          <div>
            <h1 className="text-2xl font-display font-bold text-foreground">
              {initialData ? "Edit Position" : "Add Work Experience"}
            </h1>
            <p className="text-sm text-foreground-muted">
              {initialData ? "Updating your career details." : "Showcase your professional journey."}
            </p>
          </div>
        </div>
        <div className="flex items-center gap-3">
          <button
            type="button"
            onClick={() => router.back()}
            className="px-4 py-2 border border-border bg-surface text-foreground font-medium rounded-lg hover:bg-surface-elevated transition-all text-sm"
          >
            Cancel
          </button>
          <button
            type="submit"
            disabled={loading}
            className="inline-flex items-center gap-2 px-6 py-2 bg-primary text-primary-foreground font-semibold rounded-lg hover:shadow-lg hover:shadow-primary/20 transition-all disabled:opacity-50 text-sm"
          >
            <Save size={18} />
            {loading ? "Saving..." : initialData ? "Update Record" : "Add Experience"}
          </button>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div className="lg:col-span-2 space-y-6">
          <div className="bg-surface border border-border/50 rounded-2xl p-6 space-y-6 card-shadow">
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div className="space-y-2">
                   <label className="text-sm font-semibold text-foreground flex items-center gap-2">
                     <Building2 size={16} className="text-primary/60" />
                     Company Name
                   </label>
                   <input
                     name="company"
                     defaultValue={initialData?.company}
                     placeholder="e.g. Google"
                     required
                     className="w-full px-4 py-2.5 bg-background border border-border/50 rounded-xl focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all text-sm font-medium"
                   />
                 </div>
                 <div className="space-y-2">
                   <label className="text-sm font-semibold text-foreground flex items-center gap-2">
                     <Briefcase size={16} className="text-primary/60" />
                     Job Role
                   </label>
                   <input
                     name="role"
                     defaultValue={initialData?.role}
                     placeholder="e.g. Senior Frontend Developer"
                     required
                     className="w-full px-4 py-2.5 bg-background border border-border/50 rounded-xl focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all text-sm font-medium"
                   />
                 </div>
               </div>

               <div className="space-y-2 pt-4">
                 <label className="text-sm font-semibold text-foreground">Position Overview</label>
                 <textarea
                   name="description"
                   defaultValue={initialData?.description}
                   placeholder="Briefly summarize your key responsibilities and impact..."
                   required
                   rows={4}
                   className="w-full px-4 py-3 bg-background border border-border/50 rounded-xl focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all text-sm leading-relaxed"
                 />
               </div>
          </div>

          <div className="bg-surface border border-border/50 rounded-2xl p-6 space-y-4 card-shadow">
             <h3 className="text-sm font-bold uppercase tracking-widest text-foreground-muted flex items-center gap-2">
              <ListIcon size={14} />
              Key Highlights & Impact
            </h3>
            
            <div className="flex gap-2">
              <input
                value={highlightInput}
                onChange={(e) => setHighlightInput(e.target.value)}
                onKeyDown={(e) => e.key === "Enter" && (e.preventDefault(), addHighlight())}
                placeholder="Add high-impact achievement..."
                className="flex-1 px-3 py-2 bg-background border border-border/50 rounded-lg text-xs outline-none focus:border-primary"
              />
              <button
                type="button"
                onClick={addHighlight}
                className="p-2 bg-primary/10 text-primary rounded-lg hover:bg-primary/20 transition-colors"
              >
                <Plus size={16} />
              </button>
            </div>

            <div className="space-y-2 pt-2">
              {highlights.map((h) => (
                <div
                  key={h}
                  className="flex items-start gap-3 p-3 bg-surface-elevated/50 border border-border/40 rounded-xl group"
                >
                  <div className="w-1.5 h-1.5 rounded-full bg-primary shrink-0 mt-1.5" />
                  <span className="text-xs text-foreground flex-1 leading-normal">{h}</span>
                  <button
                    type="button"
                    onClick={() => removeHighlight(h)}
                    className="p-1 text-foreground-muted hover:text-destructive transition-colors opacity-0 group-hover:opacity-100"
                  >
                    <Trash2 size={12} />
                  </button>
                </div>
              ))}
              {highlights.length === 0 && (
                <p className="text-xs text-foreground-muted italic text-center py-4 bg-background/30 rounded-xl border border-dashed border-border/50">Describe your biggest wins in this role.</p>
              )}
            </div>
          </div>
        </div>

        <div className="space-y-6">
          <div className="bg-surface border border-border/50 rounded-2xl p-6 space-y-6 card-shadow">
               <h3 className="text-sm font-bold uppercase tracking-widest text-foreground-muted">Timeline</h3>
               
               <div className="space-y-4">
                  <div className="space-y-2">
                    <label className="text-xs font-semibold text-foreground flex items-center gap-2">
                      <Calendar size={14} />
                      Start Date
                    </label>
                    <input
                      name="startDate"
                      type="date"
                      defaultValue={initialData?.startDate ? new Date(initialData.startDate).toISOString().split('T')[0] : ""}
                      required
                      className="w-full px-3 py-2 bg-background border border-border/50 rounded-lg outline-none text-xs"
                    />
                  </div>

                  <div className="space-y-2">
                    <label className="text-xs font-semibold text-foreground flex items-center gap-2">
                      <Calendar size={14} />
                      End Date
                    </label>
                    <input
                      name="endDate"
                      type="date"
                      defaultValue={initialData?.endDate ? new Date(initialData.endDate).toISOString().split('T')[0] : ""}
                      disabled={initialData?.current}
                      className="w-full px-3 py-2 bg-background border border-border/50 rounded-lg outline-none text-xs disabled:opacity-40"
                    />
                  </div>

                  <div className="flex items-center gap-2 pt-2">
                    <input
                      name="current"
                      type="checkbox"
                      id="current"
                      defaultChecked={initialData?.current}
                      className="w-3.5 h-3.5 rounded border-border text-primary focus:ring-primary outline-none"
                    />
                    <label htmlFor="current" className="text-xs font-medium text-foreground cursor-pointer">
                      Ongoing (Currently active)
                    </label>
                  </div>
               </div>

               <div className="pt-4 border-t border-border/50">
                  <label className="text-xs font-semibold text-foreground">Listing Priority Order</label>
                  <input
                    name="order"
                    type="number"
                    defaultValue={initialData?.order || 0}
                    className="w-full mt-2 px-3 py-2 bg-background border border-border/50 rounded-lg outline-none text-xs"
                  />
               </div>
          </div>

           <div className="bg-surface border border-border/50 rounded-2xl p-6 space-y-4 card-shadow">
             <h3 className="text-sm font-bold uppercase tracking-widest text-foreground-muted flex items-center gap-2">
              <TechIcon size={14} />
              Skills & Tech
            </h3>
            
            <div className="flex gap-2">
              <input
                value={techInput}
                onChange={(e) => setTechInput(e.target.value)}
                onKeyDown={(e) => e.key === "Enter" && (e.preventDefault(), addTech())}
                placeholder="Add tech..."
                className="flex-1 px-3 py-2 bg-background border border-border/50 rounded-lg text-xs outline-none focus:border-primary"
              />
              <button
                type="button"
                onClick={addTech}
                className="p-2 bg-primary/10 text-primary rounded-lg hover:bg-primary/20 transition-colors"
              >
                <Plus size={16} />
              </button>
            </div>

            <div className="flex flex-wrap gap-2 pt-2">
              {techStack.map((tech) => (
                <span
                  key={tech}
                  className="inline-flex items-center gap-1 px-2 py-1 bg-surface-elevated border border-border/50 rounded-md text-[10px] font-bold text-foreground"
                >
                  {tech}
                  <button
                    type="button"
                    onClick={() => removeTech(tech)}
                    className="p-0.5 hover:text-destructive transition-colors"
                  >
                    <X size={10} />
                  </button>
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </form>
  );
}
