"use client";

import { useState, useEffect } from "react";
import { ArrowLeft, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Card, CardContent } from "@/components/ui/card";
import { createPerformanceReview, fetchActiveEmployees } from "@/lib/supabase/performance-actions";

const RATING_LABELS: Record<number, string> = {
  1: "Below expectations",
  2: "Needs improvement",
  3: "Meets expectations",
  4: "Exceeds expectations",
  5: "Outstanding",
};

export default function PerformanceNewPage({
  onBack,
  onSuccess,
}: {
  onBack: () => void;
  onSuccess: () => void;
}) {
  const [employees, setEmployees] = useState<any[]>([]);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const [employeeId, setEmployeeId] = useState("");
  const [reviewerId, setReviewerId] = useState("");
  const [periodStart, setPeriodStart] = useState("");
  const [periodEnd, setPeriodEnd] = useState("");
  const [rating, setRating] = useState<string>("");
  const [strengths, setStrengths] = useState("");
  const [improvements, setImprovements] = useState("");
  const [goalsNext, setGoalsNext] = useState("");

  useEffect(() => {
    fetchActiveEmployees().then(setEmployees).catch(() => {});
  }, []);

  const handleSubmit = async () => {
    setError(null);
    if (!employeeId) { setError("Select an employee"); return; }
    if (!periodStart || !periodEnd) { setError("Select a review period"); return; }
    if (periodEnd < periodStart) { setError("End date must be after start date"); return; }

    setSaving(true);
    try {
      const result = await createPerformanceReview({
        employee_id: employeeId,
        reviewer_id: reviewerId || employeeId,
        period_start: periodStart,
        period_end: periodEnd,
        overall_rating: rating ? parseInt(rating, 10) : null,
        strengths: strengths || null,
        improvements: improvements || null,
        goals_next: goalsNext || null,
      });
      if (!result.success) { setError(result.error || "Failed to create review"); return; }
      onSuccess();
    } catch (e: any) {
      setError(e.message || "An unexpected error occurred");
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="p-6 lg:p-8 space-y-6">
      <div className="flex items-center gap-4">
        <button onClick={onBack} className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
          <ArrowLeft className="w-5 h-5 text-gray-500" />
        </button>
        <div>
          <h1 className="text-3xl font-serif font-bold text-gray-900">New Performance Review</h1>
          <p className="text-gray-500 mt-1">Evaluate an employee's performance</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>
      )}

      <Card className="border-0 shadow-sm">
        <CardContent className="p-6 space-y-5">
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <Label>Employee *</Label>
              <select value={employeeId} onChange={(e) => setEmployeeId(e.target.value)}
                className="mt-1 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]">
                <option value="">Select employee</option>
                {employees.map((emp) => <option key={emp.id} value={emp.id}>{emp.first_name} {emp.last_name}</option>)}
              </select>
            </div>
            <div>
              <Label>Reviewer</Label>
              <select value={reviewerId} onChange={(e) => setReviewerId(e.target.value)}
                className="mt-1 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]">
                <option value="">Self-review</option>
                {employees.map((emp) => <option key={emp.id} value={emp.id}>{emp.first_name} {emp.last_name}</option>)}
              </select>
            </div>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <Label>Period Start *</Label>
              <input type="date" value={periodStart} onChange={(e) => setPeriodStart(e.target.value)}
                className="mt-1 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]" />
            </div>
            <div>
              <Label>Period End *</Label>
              <input type="date" value={periodEnd} onChange={(e) => setPeriodEnd(e.target.value)} min={periodStart}
                className="mt-1 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]" />
            </div>
          </div>

          <div>
            <Label>Overall Rating</Label>
            <div className="mt-2 grid grid-cols-5 gap-2">
              {[1, 2, 3, 4, 5].map((r) => (
                <button
                  key={r}
                  type="button"
                  onClick={() => setRating(String(r))}
                  className={`p-2 rounded-lg text-center transition-colors cursor-pointer border ${
                    rating === String(r)
                      ? "bg-amber-50 border-amber-300 text-amber-700"
                      : "border-gray-200 text-gray-500 hover:bg-gray-50"
                  }`}
                >
                  <div className="text-lg">{"★".repeat(r)}{"☆".repeat(5 - r)}</div>
                  <div className="text-[10px] mt-1">{RATING_LABELS[r]}</div>
                </button>
              ))}
            </div>
          </div>

          <div>
            <Label>Strengths</Label>
            <textarea value={strengths} onChange={(e) => setStrengths(e.target.value)} rows={3}
              className="mt-1 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75] resize-none"
              placeholder="What does this employee do well?" />
          </div>

          <div>
            <Label>Areas for Improvement</Label>
            <textarea value={improvements} onChange={(e) => setImprovements(e.target.value)} rows={3}
              className="mt-1 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75] resize-none"
              placeholder="What could be improved?" />
          </div>

          <div>
            <Label>Goals for Next Period</Label>
            <textarea value={goalsNext} onChange={(e) => setGoalsNext(e.target.value)} rows={3}
              className="mt-1 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75] resize-none"
              placeholder="What should the employee focus on next?" />
          </div>

          <div className="flex justify-end pt-4 border-t border-gray-100">
            <Button onClick={handleSubmit} disabled={saving} className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer">
              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : null}
              {saving ? "Saving..." : "Save Review"}
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}