'use client';
import { useState } from 'react';
import { motion } from 'framer-motion';

export interface QuarterlyTargetType {
  id: string;
  employeeId: string;
  quarter: string;
  year: number;
  title: string;
  kpiMeasurement: string;
  expectedOutcome: string;
  completionTimeline: string;
  weight: number;
  progress: number;
  linkedWorkPlanId?: string;
  linkedDeptTargetId?: string;
  supervisorComments?: string;
  status: 'Not Started' | 'In Progress' | 'Completed';
}

interface Props {
  target: QuarterlyTargetType;
  index: number;
  workPlanTitle?: string;
  onUpdate?: (updated: QuarterlyTargetType) => void;
}

export default function QuarterlyTargetCard({ target, index, workPlanTitle, onUpdate }: Props) {
  const [editing, setEditing] = useState(false);
  const [form, setForm] = useState<QuarterlyTargetType>({ ...target });

  const handleSave = () => {
    onUpdate?.(form);
    setEditing(false);
  };

  return (
    <>
      <motion.div
        initial={{ opacity: 0, y: 16 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.35, delay: index * 0.08 }}
        whileHover={{ scale: 1.015, y: -3, boxShadow: '0 10px 32px rgba(0,0,0,0.08)' }}
        whileTap={{ scale: 0.985 }}
        className={`bg-white rounded-2xl border shadow-sm p-5 cursor-pointer ${target.status === 'Completed' ? 'border-green-200' : target.status === 'In Progress' ? 'border-blue-200' : 'border-gray-100'}`}
      >
        <div className="flex items-start justify-between mb-3">
          <div className="flex-1 pr-3">
            <div className="flex items-center gap-2 mb-1.5 flex-wrap">
              <span className="text-xs font-semibold px-2.5 py-0.5 rounded-full bg-purple-100 text-purple-700">{form.quarter} {form.year}</span>
              <span className={`text-xs font-semibold px-2.5 py-0.5 rounded-full ${form.status === 'Completed' ? 'bg-green-100 text-green-700' : form.status === 'In Progress' ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-600'}`}>{form.status}</span>
              <span className="text-xs font-semibold px-2.5 py-0.5 rounded-full bg-amber-100 text-amber-700">Weight: {form.weight}%</span>
            </div>
            <h4 className="font-semibold text-gray-800 text-sm">{form.title}</h4>
            {workPlanTitle && <p className="text-xs text-purple-600 mt-0.5">Linked to workplan: {workPlanTitle}</p>}
          </div>
          <div className="text-right flex-shrink-0">
            <p className="text-2xl font-bold" style={{ color: '#b828a0' }}>{form.progress}%</p>
          </div>
        </div>

        <div className="space-y-2">
          <div className="flex items-center justify-between text-xs">
            <span className="text-gray-500">KPI Measurement:</span>
            <span className="text-gray-700 font-medium">{form.kpiMeasurement}</span>
          </div>
          <div className="flex items-center justify-between text-xs">
            <span className="text-gray-500">Expected Outcome:</span>
            <span className="text-gray-700 font-medium">{form.expectedOutcome}</span>
          </div>
          <div className="flex items-center justify-between text-xs">
            <span className="text-gray-500">Timeline:</span>
            <span className="text-gray-700 font-medium">{form.completionTimeline}</span>
          </div>
        </div>

        <div className="flex items-center gap-3 mt-3">
          <div className="flex-1 bg-gray-100 rounded-full h-2">
            <motion.div initial={{ width: 0 }} whileInView={{ width: `${form.progress}%` }} viewport={{ once: true }} transition={{ duration: 0.8 }}
              className="h-2 rounded-full" style={{ background: form.status === 'Completed' ? '#16a34a' : '#b828a0' }} />
          </div>
          <span className="text-xs font-bold text-gray-700 w-10 text-right">{form.progress}%</span>
        </div>

        {form.supervisorComments && (
          <div className="mt-3 bg-pink-50 border border-pink-100 rounded-lg px-3 py-2">
            <p className="text-xs text-pink-800"><span className="font-semibold">Supervisor:</span> {form.supervisorComments}</p>
          </div>
        )}

        <button onClick={e => { e.stopPropagation(); setForm({ ...target }); setEditing(true); }}
          className="mt-3 flex items-center gap-1 text-xs px-3 py-1.5 rounded-lg text-white font-medium cursor-pointer whitespace-nowrap"
          style={{ background: '#b828a0' }}>
          <i className="ri-edit-line text-xs"></i> Update
        </button>
      </motion.div>

      {editing && (
        <div className="fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md max-h-[90vh] overflow-y-auto">
            <div className="px-5 py-4 border-b border-gray-100 flex items-center justify-between" style={{ background: '#b828a0' }}>
              <h3 className="text-white font-bold text-base">Update Quarterly Target</h3>
              <button onClick={() => setEditing(false)} className="w-7 h-7 flex items-center justify-center cursor-pointer">
                <i className="ri-close-line text-white text-lg"></i>
              </button>
            </div>
            <div className="p-5 space-y-3">
              <div>
                <label className="text-xs font-medium text-gray-600 block mb-1">Title</label>
                <input value={form.title} onChange={e => setForm(f => ({ ...f, title: e.target.value }))} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none" />
              </div>
              <div>
                <label className="text-xs font-medium text-gray-600 block mb-1">KPI Measurement</label>
                <input value={form.kpiMeasurement} onChange={e => setForm(f => ({ ...f, kpiMeasurement: e.target.value }))} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none" />
              </div>
              <div>
                <label className="text-xs font-medium text-gray-600 block mb-1">Expected Outcome</label>
                <input value={form.expectedOutcome} onChange={e => setForm(f => ({ ...f, expectedOutcome: e.target.value }))} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none" />
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="text-xs font-medium text-gray-600 block mb-1">Progress (%)</label>
                  <input type="number" min={0} max={100} value={form.progress} onChange={e => setForm(f => ({ ...f, progress: Math.min(100, Math.max(0, Number(e.target.value))) }))} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none" />
                </div>
                <div>
                  <label className="text-xs font-medium text-gray-600 block mb-1">Weight (%)</label>
                  <input type="number" min={0} max={100} value={form.weight} onChange={e => setForm(f => ({ ...f, weight: Number(e.target.value) }))} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none" />
                </div>
                <div>
                  <label className="text-xs font-medium text-gray-600 block mb-1">Completion Timeline</label>
                  <input type="date" value={form.completionTimeline} onChange={e => setForm(f => ({ ...f, completionTimeline: e.target.value }))} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none" />
                </div>
                <div>
                  <label className="text-xs font-medium text-gray-600 block mb-1">Status</label>
                  <div className="flex flex-col gap-1">
                    {(['Not Started', 'In Progress', 'Completed'] as const).map(s => (
                      <button key={s} onClick={() => setForm(f => ({ ...f, status: s }))}
                        className={`py-1 rounded-lg text-xs font-medium cursor-pointer border transition-all ${form.status === s ? 'text-white border-transparent' : 'bg-gray-50 text-gray-600 border-gray-200'}`}
                        style={form.status === s ? { background: '#b828a0' } : {}}>{s}</button>
                    ))}
                  </div>
                </div>
              </div>
              <div className="flex gap-2 pt-2">
                <button onClick={() => setEditing(false)} className="flex-1 py-2.5 border border-gray-200 rounded-xl text-sm text-gray-600 cursor-pointer whitespace-nowrap">Cancel</button>
                <button onClick={handleSave} className="flex-1 py-2.5 text-white rounded-xl text-sm font-semibold cursor-pointer whitespace-nowrap" style={{ background: '#b828a0' }}>Save Changes</button>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}