"use client";

import { useState, useEffect } from "react";
import { useSearchParams, useRouter } from "next/navigation";
import { ArrowLeft, Star, CheckCircle, AlertCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Textarea } from "@/components/ui/textarea";
import { fetchAppraisal, submitAppraisal } from "@/lib/supabase/appraisal-actions";
import PageSkeleton from "./PageSkeleton";

// ── Star Rating Component ──────────────────────────────────────

function StarRating({
  value,
  onChange,
  readonly = false,
  size = "md",
}: {
  value: number;
  onChange?: (v: number) => void;
  readonly?: boolean;
  size?: "sm" | "md" | "lg";
}) {
  const [hover, setHover] = useState(0);
  const sizeClass = size === "lg" ? "w-7 h-7" : size === "md" ? "w-5 h-5" : "w-4 h-4";

  return (
    <div className="flex items-center gap-0.5">
      {[1, 2, 3, 4, 5].map((s) => (
        <button
          key={s}
          type="button"
          disabled={readonly}
          className={`${readonly ? "cursor-default" : "cursor-pointer"} transition-transform ${!readonly && "hover:scale-110"}`}
          onClick={() => onChange?.(s)}
          onMouseEnter={() => !readonly && setHover(s)}
          onMouseLeave={() => !readonly && setHover(0)}
        >
          <Star
            className={`${sizeClass} ${
              s <= (hover || value)
                ? "text-amber-400 fill-amber-400"
                : "text-gray-200"
            }`}
          />
        </button>
      ))}
    </div>
  );
}

// ── Question Renderer ──────────────────────────────────────────

function RatingQuestion({
  question,
  value,
  onChange,
  readonly,
}: {
  question: string;
  value: number;
  onChange: (v: number) => void;
  readonly: boolean;
}) {
  return (
    <div className="space-y-2">
      <p className="text-sm font-medium text-gray-700">{question}</p>
      <StarRating value={value} onChange={onChange} readonly={readonly} size="lg" />
    </div>
  );
}

function TextQuestion({
  question,
  value,
  onChange,
  readonly,
}: {
  question: string;
  value: string;
  onChange: (v: string) => void;
  readonly: boolean;
}) {
  return (
    <div className="space-y-2">
      <p className="text-sm font-medium text-gray-700">{question}</p>
      <Textarea
        value={value}
        onChange={(e) => onChange(e.target.value)}
        readOnly={readonly}
        placeholder="Type your response..."
        rows={3}
      />
    </div>
  );
}

function YesNoQuestion({
  question,
  value,
  onChange,
  readonly,
}: {
  question: string;
  value: boolean | null;
  onChange: (v: boolean) => void;
  readonly: boolean;
}) {
  return (
    <div className="space-y-2">
      <p className="text-sm font-medium text-gray-700">{question}</p>
      <div className="flex gap-2">
        <button
          type="button"
          disabled={readonly}
          onClick={() => onChange(true)}
          className={`px-4 py-2 text-sm font-medium rounded-lg border transition-colors cursor-pointer ${
            value === true
              ? "bg-teal-50 border-teal-300 text-teal-700"
              : "border-gray-200 text-gray-500 hover:bg-gray-50"
          } ${readonly ? "cursor-default" : ""}`}
        >
          Yes
        </button>
        <button
          type="button"
          disabled={readonly}
          onClick={() => onChange(false)}
          className={`px-4 py-2 text-sm font-medium rounded-lg border transition-colors cursor-pointer ${
            value === false
              ? "bg-red-50 border-red-300 text-red-700"
              : "border-gray-200 text-gray-500 hover:bg-gray-50"
          } ${readonly ? "cursor-default" : ""}`}
        >
          No
        </button>
      </div>
    </div>
  );
}

// ── Main Form Page ─────────────────────────────────────────────

export default function AppraisalFormPage() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const id = searchParams.get("id");

  const [appraisal, setAppraisal] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [responses, setResponses] = useState<Record<string, any>>({});
  const [overallRating, setOverallRating] = useState(0);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");
  const [success, setSuccess] = useState(false);

  useEffect(() => {
    if (!id) {
      router.push("/performance");
      return;
    }
    let cancelled = false;
    fetchAppraisal(id)
      .then((a) => {
        if (!cancelled) {
          setAppraisal(a);
          if (a?.responses) {
            try {
              setResponses(JSON.parse(a.responses));
            } catch {
              setResponses({});
            }
          }
          if (a?.overall_rating) {
            setOverallRating(a.overall_rating);
          }
        }
      })
      .catch(() => {})
      .finally(() => {
        if (!cancelled) setLoading(false);
      });
    return () => {
      cancelled = true;
    };
  }, [id, router]);

  const handleSubmit = async () => {
    if (overallRating === 0) {
      setError("Please provide an overall rating");
      return;
    }
    setSaving(true);
    setError("");
    const result = await submitAppraisal(id!, responses, overallRating);
    setSaving(false);
    if (result.success) {
      setSuccess(true);
      // Refresh appraisal data
      const refreshed = await fetchAppraisal(id!);
      setAppraisal(refreshed);
    } else {
      setError(result.error || "Failed to submit appraisal");
    }
  };

  const handleResponseChange = (questionId: string, value: any) => {
    setResponses((prev) => ({ ...prev, [questionId]: value }));
  };

  if (loading) return <PageSkeleton name="Appraisal Form" />;

  if (!appraisal) {
    return (
      <div className="p-6 lg:p-8">
        <div className="text-center py-12">
          <AlertCircle className="w-8 h-8 text-gray-200 mx-auto mb-3" />
          <p className="text-sm text-gray-400 font-medium">Appraisal not found</p>
          <Button
            onClick={() => router.push("/performance")}
            variant="outline"
            className="mt-4 cursor-pointer"
          >
            Back to Appraisals
          </Button>
        </div>
      </div>
    );
  }

  const isSubmitted = appraisal.status === "submitted";
  const employeeName = appraisal.employee
    ? `${appraisal.employee.first_name} ${appraisal.employee.last_name}`
    : "Unknown";
  const reviewerName = appraisal.reviewer
    ? `${appraisal.reviewer.first_name} ${appraisal.reviewer.last_name}`
    : "Unknown";
  const typeLabel =
    appraisal.type === "self"
      ? "Self Assessment"
      : appraisal.type === "manager"
      ? "Manager Assessment"
      : appraisal.type || "Peer Assessment";

  const questions = appraisal.cycle?.template?.questions
    ? typeof appraisal.cycle.template.questions === "string"
      ? JSON.parse(appraisal.cycle.template.questions)
      : appraisal.cycle.template.questions
    : [];

  const cycleName = appraisal.cycle?.name || "";

  if (success) {
    return (
      <div className="p-6 lg:p-8">
        <div className="flex items-start gap-3 mb-6">
          <button
            onClick={() => router.push("/performance")}
            className="mt-1 p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
          >
            <ArrowLeft className="w-4 h-4 text-gray-500" />
          </button>
          <div>
            <h1 className="text-3xl font-serif font-bold text-gray-900">
              Appraisal Submitted
            </h1>
          </div>
        </div>
        <div className="bg-green-50 border border-green-200 rounded-xl p-8 text-center">
          <CheckCircle className="w-12 h-12 text-green-500 mx-auto mb-4" />
          <p className="text-lg font-semibold text-green-800">
            Appraisal submitted successfully
          </p>
          <p className="text-sm text-green-600 mt-2">
            Your responses have been recorded for this appraisal cycle.
          </p>
          <Button
            onClick={() => router.push("/performance")}
            className="mt-6 bg-green-600 hover:bg-green-700 text-white cursor-pointer"
          >
            Back to Appraisals
          </Button>
        </div>
      </div>
    );
  }

  return (
    <div className="p-6 lg:p-8 space-y-6">
      {/* Header */}
      <div className="flex items-start gap-3">
        <button
          onClick={() => router.push("/performance")}
          className="mt-1 p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
        >
          <ArrowLeft className="w-4 h-4 text-gray-500" />
        </button>
        <div className="flex-1">
          <div className="flex items-center gap-2">
            <h1 className="text-3xl font-serif font-bold text-gray-900">
              {typeLabel}
            </h1>
            {isSubmitted && (
              <Badge variant="outline" className="text-xs border bg-green-100 text-green-700 border-green-200">
                Submitted
              </Badge>
            )}
          </div>
          <p className="text-gray-500 mt-1">
            {cycleName && `${cycleName} — `}
            {employeeName}
          </p>
          <div className="flex items-center gap-4 mt-2 text-sm text-gray-500">
            <span>Employee: <strong className="text-gray-700">{employeeName}</strong></span>
            <span>Reviewer: <strong className="text-gray-700">{reviewerName}</strong></span>
          </div>
        </div>
      </div>

      {/* Questions */}
      {questions.length > 0 && (
        <div className="bg-white rounded-lg border border-gray-200 p-6 space-y-6">
          <h2 className="text-lg font-semibold text-gray-900">Questions</h2>
          {questions.map((q: { id: string; question: string; type: string }) => (
            <div key={q.id} className="pb-4 border-b border-gray-100 last:border-b-0 last:pb-0">
              {q.type === "rating" && (
                <RatingQuestion
                  question={q.question}
                  value={responses[q.id] || 0}
                  onChange={(v) => handleResponseChange(q.id, v)}
                  readonly={isSubmitted}
                />
              )}
              {q.type === "text" && (
                <TextQuestion
                  question={q.question}
                  value={responses[q.id] || ""}
                  onChange={(v) => handleResponseChange(q.id, v)}
                  readonly={isSubmitted}
                />
              )}
              {q.type === "yes_no" && (
                <YesNoQuestion
                  question={q.question}
                  value={responses[q.id] ?? null}
                  onChange={(v) => handleResponseChange(q.id, v)}
                  readonly={isSubmitted}
                />
              )}
            </div>
          ))}
        </div>
      )}

      {/* Overall Rating */}
      <div className="bg-white rounded-lg border border-gray-200 p-6">
        <h2 className="text-lg font-semibold text-gray-900 mb-3">Overall Rating</h2>
        <StarRating
          value={overallRating}
          onChange={isSubmitted ? undefined : setOverallRating}
          readonly={isSubmitted}
          size="lg"
        />
        {overallRating > 0 && (
          <p className="text-sm text-gray-500 mt-2">
            {overallRating === 1 && "Below expectations"}
            {overallRating === 2 && "Needs improvement"}
            {overallRating === 3 && "Meets expectations"}
            {overallRating === 4 && "Exceeds expectations"}
            {overallRating === 5 && "Outstanding"}
          </p>
        )}
      </div>

      {/* Error */}
      {error && (
        <div className="flex items-center gap-2 text-sm text-red-600 bg-red-50 px-4 py-3 rounded-lg">
          <AlertCircle className="w-4 h-4 flex-shrink-0" />
          {error}
        </div>
      )}

      {/* Submit */}
      {!isSubmitted && (
        <div className="flex justify-end">
          <Button
            onClick={handleSubmit}
            disabled={saving}
            className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white px-8 cursor-pointer"
          >
            {saving ? "Submitting..." : "Submit Appraisal"}
          </Button>
        </div>
      )}
    </div>
  );
}