"use client";

import { useState, useEffect, useCallback } from "react";
import { Loader2, Play, Save, CheckCircle, AlertCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Select } from "@/components/ui/select";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import {
  fetchAccrualRules,
  fetchLeaveTypesForAccrual,
  saveAccrualRule,
  runAccrual,
  type AccrualRuleWithLeaveType,
} from "@/lib/supabase/leave-accrual-actions";

interface LeaveTypeOption {
  id: string;
  name: string;
}

interface RuleFormState {
  accrualRate: string;
  frequency: "monthly" | "fortnightly" | "weekly";
  maxBalance: string;
}

function Row({
  leaveType,
  existingRule,
  onSave,
}: {
  leaveType: LeaveTypeOption;
  existingRule: AccrualRuleWithLeaveType | null;
  onSave: () => void;
}) {
  const [form, setForm] = useState<RuleFormState>({
    accrualRate: existingRule ? String(existingRule.accrual_rate) : "",
    frequency: existingRule?.accrual_frequency || "monthly",
    maxBalance: existingRule?.max_balance != null ? String(existingRule.max_balance) : "",
  });
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);

  const handleSave = useCallback(async () => {
    const rate = parseFloat(form.accrualRate);
    if (isNaN(rate) || rate < 0) return;

    const maxBalance = form.maxBalance.trim() === "" ? null : parseFloat(form.maxBalance);

    setSaving(true);
    const result = await saveAccrualRule(leaveType.id, rate, form.frequency, isNaN(maxBalance as number) ? null : maxBalance);
    setSaving(false);

    if (result.success) {
      setSaved(true);
      setTimeout(() => setSaved(false), 2000);
      onSave();
    }
  }, [form, leaveType.id, onSave]);

  return (
    <div className="flex flex-col sm:flex-row sm:items-end gap-3 sm:gap-4 p-4 rounded-lg border border-gray-100 bg-gray-50/30">
      {/* Leave type name */}
      <div className="sm:w-48 flex-shrink-0">
        <label className="text-xs font-medium text-gray-500 mb-1 block">Leave type</label>
        <p className="text-sm font-semibold text-gray-900">{leaveType.name}</p>
      </div>

      {/* Accrual rate */}
      <div className="flex-1 min-w-0">
        <label htmlFor={`rate-${leaveType.id}`} className="text-xs font-medium text-gray-500 mb-1 block">
          Accrual rate (days)
        </label>
        <Input
          id={`rate-${leaveType.id}`}
          type="number"
          step="0.1"
          min="0"
          placeholder="e.g. 1.5"
          value={form.accrualRate}
          onChange={(e) => setForm((f) => ({ ...f, accrualRate: e.target.value }))}
          className="h-9"
        />
      </div>

      {/* Frequency */}
      <div className="sm:w-36 flex-shrink-0">
        <label htmlFor={`freq-${leaveType.id}`} className="text-xs font-medium text-gray-500 mb-1 block">
          Frequency
        </label>
        <Select
          id={`freq-${leaveType.id}`}
          value={form.frequency}
          onChange={(e) => setForm((f) => ({ ...f, frequency: e.target.value as RuleFormState["frequency"] }))}
          className="h-9"
        >
          <option value="monthly">Monthly</option>
          <option value="fortnightly">Fortnightly</option>
          <option value="weekly">Weekly</option>
        </Select>
      </div>

      {/* Max balance */}
      <div className="flex-1 min-w-0">
        <label htmlFor={`max-${leaveType.id}`} className="text-xs font-medium text-gray-500 mb-1 block">
          Max balance (optional)
        </label>
        <Input
          id={`max-${leaveType.id}`}
          type="number"
          step="0.5"
          min="0"
          placeholder="No limit"
          value={form.maxBalance}
          onChange={(e) => setForm((f) => ({ ...f, maxBalance: e.target.value }))}
          className="h-9"
        />
      </div>

      {/* Save button */}
      <div className="flex-shrink-0">
        <Button
          onClick={handleSave}
          disabled={saving || !form.accrualRate}
          size="sm"
          className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-1.5 cursor-pointer h-9"
        >
          {saving ? (
            <Loader2 className="w-3.5 h-3.5 animate-spin" />
          ) : saved ? (
            <CheckCircle className="w-3.5 h-3.5" />
          ) : (
            <Save className="w-3.5 h-3.5" />
          )}
          {saving ? "Saving..." : saved ? "Saved" : "Save"}
        </Button>
      </div>
    </div>
  );
}

export default function LeaveAccrualPage() {
  const [leaveTypes, setLeaveTypes] = useState<LeaveTypeOption[]>([]);
  const [rules, setRules] = useState<AccrualRuleWithLeaveType[]>([]);
  const [loading, setLoading] = useState(true);
  const [runningAccrual, setRunningAccrual] = useState(false);
  const [accrualResult, setAccrualResult] = useState<{ success: boolean; count?: number; error?: string } | null>(null);

  const loadData = useCallback(() => {
    Promise.all([fetchAccrualRules(), fetchLeaveTypesForAccrual()])
      .then(([fetchedRules, fetchedTypes]) => {
        setRules(fetchedRules);
        setLeaveTypes(fetchedTypes);
      })
      .catch(console.error)
      .finally(() => setLoading(false));
  }, []);

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

  const handleRunAccrual = useCallback(async () => {
    setRunningAccrual(true);
    setAccrualResult(null);
    try {
      const result = await runAccrual();
      setAccrualResult(result);
    } catch (err) {
      setAccrualResult({ success: false, error: err instanceof Error ? err.message : "Unknown error" });
    } finally {
      setRunningAccrual(false);
    }
  }, []);

  // Build a map of existing rules by leave_type_id
  const rulesMap = new Map<string, AccrualRuleWithLeaveType>();
  for (const rule of rules) {
    rulesMap.set(rule.leave_type_id, rule);
  }

  if (loading) {
    return (
      <div className="p-6 lg:p-8 flex items-center justify-center min-h-[300px]">
        <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
      </div>
    );
  }

  return (
    <div className="p-6 lg:p-8 space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-3xl font-serif font-bold text-gray-900">Leave Accrual</h1>
          <p className="text-gray-500 mt-1">Configure automatic leave accrual for each leave type</p>
        </div>
        <Button
          onClick={handleRunAccrual}
          disabled={runningAccrual || leaveTypes.length === 0}
          className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer"
        >
          {runningAccrual ? (
            <Loader2 className="w-4 h-4 animate-spin" />
          ) : (
            <Play className="w-4 h-4" />
          )}
          {runningAccrual ? "Running..." : "Run Accrual Now"}
        </Button>
      </div>

      {/* Accrual result banner */}
      {accrualResult && (
        <Card
          className={`border ${
            accrualResult.success
              ? "border-emerald-200 bg-emerald-50/50"
              : "border-red-200 bg-red-50/50"
          }`}
        >
          <CardContent className="pt-4 flex items-center gap-3">
            {accrualResult.success ? (
              <CheckCircle className="w-5 h-5 text-emerald-600 flex-shrink-0" />
            ) : (
              <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0" />
            )}
            <div>
              <p className="text-sm font-medium text-gray-900">
                {accrualResult.success
                  ? `Accrual complete — ${accrualResult.count ?? 0} employee(s) updated`
                  : `Error: ${accrualResult.error}`}
              </p>
            </div>
          </CardContent>
        </Card>
      )}

      {/* Info card */}
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">How accrual works</CardTitle>
          <CardDescription>
            Set an accrual rate for each leave type. When you run accrual, the system calculates how many
            days each employee has earned based on their start date and the selected frequency, then creates
            an accrual record. The max balance caps how much leave can accumulate.
          </CardDescription>
        </CardHeader>
      </Card>

      {/* Accrual rules */}
      {leaveTypes.length === 0 ? (
        <Card>
          <CardContent className="pt-6 text-center text-sm text-gray-500">
            No leave types found. Create leave types first in the Leave settings.
          </CardContent>
        </Card>
      ) : (
        <Card>
          <CardHeader>
            <CardTitle className="text-lg">Accrual rules</CardTitle>
            <CardDescription>
              Configure how leave accrues for each leave type
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {/* Header row */}
              <div className="hidden sm:flex items-end gap-4 px-4 text-xs font-medium text-gray-400 uppercase tracking-wide">
                <div className="sm:w-48 flex-shrink-0">Leave type</div>
                <div className="flex-1">Accrual rate</div>
                <div className="sm:w-36">Frequency</div>
                <div className="flex-1">Max balance</div>
                <div className="flex-shrink-0 w-24"></div>
              </div>

              {leaveTypes.map((lt) => (
                <Row
                  key={lt.id}
                  leaveType={lt}
                  existingRule={rulesMap.get(lt.id) || null}
                  onSave={loadData}
                />
              ))}
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  );
}