"use client";

import { useState, useEffect } from "react";
import { ArrowLeft } from "lucide-react";
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 { createPosition, fetchDepartments } from "@/lib/supabase/recruitment-actions";
import type { EmploymentType, PositionStatus } from "@/lib/supabase/recruitment-types";
import { EMPLOYMENT_TYPE_LABELS } from "@/lib/supabase/recruitment-types";
import PageSkeleton from "./PageSkeleton";

export default function RecruitmentNewPage({ onBack }: { onBack: () => void }) {
  const [title, setTitle] = useState("");
  const [departmentId, setDepartmentId] = useState("");
  const [employmentType, setEmploymentType] = useState<EmploymentType>("full_time");
  const [description, setDescription] = useState("");
  const [status, setStatus] = useState<PositionStatus>("open");
  const [departments, setDepartments] = useState<{ id: string; name: string }[]>([]);
  const [loading, setLoading] = useState(false);
  const [initialLoading, setInitialLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    fetchDepartments()
      .then((data) => { if (!cancelled) setDepartments(data); })
      .catch(() => {})
      .finally(() => { if (!cancelled) setInitialLoading(false); });
    return () => { cancelled = true; };
  }, []);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!title.trim()) return;
    setLoading(true);
    setError(null);
    const result = await createPosition({
      title: title.trim(),
      department_id: departmentId || undefined,
      employment_type: employmentType,
      description: description.trim() || undefined,
      status,
    });
    setLoading(false);
    if (!result.success) {
      setError(result.error || "Failed to create position");
      return;
    }
    onBack();
  };

  if (initialLoading) return <PageSkeleton />;

  return (
    <div className="p-6 lg:p-8 space-y-6">
      {/* Header */}
      <div className="flex items-center gap-3">
        <Button
          variant="ghost"
          size="sm"
          onClick={onBack}
          className="gap-1 text-gray-600 hover:text-gray-900 cursor-pointer"
        >
          <ArrowLeft className="w-4 h-4" />
          Back
        </Button>
        <div>
          <h1 className="text-3xl font-serif font-bold text-gray-900">Add position</h1>
          <p className="text-gray-500 mt-1">Create an internal requisition to track hiring</p>
        </div>
      </div>

      {error && (
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
          {error}
        </div>
      )}

      {/* Form */}
      <form onSubmit={handleSubmit} className="max-w-2xl space-y-6">
        <div className="bg-white rounded-lg border border-gray-200 shadow-sm p-6 space-y-5">
          {/* Title */}
          <div className="space-y-2">
            <Label htmlFor="title">Position title *</Label>
            <Input
              id="title"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              placeholder="e.g. Software Engineer"
              required
            />
          </div>

          {/* Department */}
          <div className="space-y-2">
            <Label htmlFor="department">Department</Label>
            <select
              id="department"
              value={departmentId}
              onChange={(e) => setDepartmentId(e.target.value)}
              className="w-full h-10 rounded-lg border border-gray-200 bg-white px-3 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent"
            >
              <option value="">No department</option>
              {departments.map((d) => (
                <option key={d.id} value={d.id}>{d.name}</option>
              ))}
            </select>
          </div>

          {/* Employment Type */}
          <div className="space-y-2">
            <Label htmlFor="employmentType">Employment type *</Label>
            <select
              id="employmentType"
              value={employmentType}
              onChange={(e) => setEmploymentType(e.target.value as EmploymentType)}
              className="w-full h-10 rounded-lg border border-gray-200 bg-white px-3 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent"
            >
              {Object.entries(EMPLOYMENT_TYPE_LABELS).map(([key, label]) => (
                <option key={key} value={key}>{label}</option>
              ))}
            </select>
          </div>

          {/* Description */}
          <div className="space-y-2">
            <Label htmlFor="description">Description</Label>
            <Textarea
              id="description"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder="Key responsibilities, requirements, and benefits..."
              rows={6}
            />
          </div>

          {/* Status */}
          <div className="space-y-2">
            <Label>Status</Label>
            <div className="flex gap-3">
              <button
                type="button"
                onClick={() => setStatus("draft")}
                className={`flex-1 py-2.5 px-4 rounded-lg text-sm font-medium border transition-colors cursor-pointer ${
                  status === "draft"
                    ? "bg-gray-100 border-gray-300 text-gray-900"
                    : "bg-white border-gray-200 text-gray-500 hover:bg-gray-50"
                }`}
              >
                Draft
              </button>
              <button
                type="button"
                onClick={() => setStatus("open")}
                className={`flex-1 py-2.5 px-4 rounded-lg text-sm font-medium border transition-colors cursor-pointer ${
                  status === "open"
                    ? "bg-teal-50 border-teal-300 text-teal-700"
                    : "bg-white border-gray-200 text-gray-500 hover:bg-gray-50"
                }`}
              >
                Open
              </button>
            </div>
            <p className="text-xs text-gray-400">Open positions accept applicants. Drafts are internal planning.</p>
          </div>
        </div>

        {/* Actions */}
        <div className="flex gap-3">
          <Button
            type="button"
            variant="outline"
            onClick={onBack}
            className="cursor-pointer"
          >
            Cancel
          </Button>
          <Button
            type="submit"
            disabled={loading || !title.trim()}
            className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white cursor-pointer disabled:opacity-50"
          >
            {loading ? "Creating..." : "Create position"}
          </Button>
        </div>
      </form>
    </div>
  );
}