'use client';
import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import Link from 'next/link';
import { api } from '@/lib/api';
import { formatDate } from '@/lib/format';

const WEEKDAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

function iso(y: number, m: number, d: number): string {
  return `${y}-${String(m + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
}

function chipColor(e: any): string {
  if (e.status === 'Completed' || e.status === 'Testing Completed') return 'bg-green-100 text-green-800';
  if (e.status === 'Overdue' || e.status === 'Expired') return 'bg-red-100 text-red-800';
  if (e.kind === 'testing') return 'bg-amber-100 text-amber-800';
  return 'bg-blue-100 text-blue-800';
}

function dotColor(e: any): string {
  if (e.status === 'Completed' || e.status === 'Testing Completed') return 'bg-green-500';
  if (e.status === 'Overdue' || e.status === 'Expired') return 'bg-red-500';
  if (e.kind === 'testing') return 'bg-amber-500';
  return 'bg-blue-500';
}

export default function CalendarPage() {
  const now = new Date();
  const [year, setYear] = useState(now.getFullYear());
  const [month, setMonth] = useState(now.getMonth());
  const todayStr = iso(now.getFullYear(), now.getMonth(), now.getDate());
  const [selected, setSelected] = useState(todayStr);

  const first = iso(year, month, 1);
  const last = iso(year, month + 1, 0);
  const q = useQuery({
    queryKey: ['cal', year, month],
    queryFn: () => api.get(`/api/v1/calendar?from=${first}&to=${last}`),
  });
  const items: any[] = q.data ?? [];
  const byDate: Record<string, any[]> = {};
  items.forEach((e) => {
    const d = String(e.date ?? '').slice(0, 10);
    if (d) (byDate[d] ||= []).push(e);
  });

  // Monday-first grid offset
  const offset = (new Date(year, month, 1).getDay() + 6) % 7;
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  const cells: (string | null)[] = [...Array(offset).fill(null)];
  for (let d = 1; d <= daysInMonth; d++) cells.push(iso(year, month, d));

  const shift = (dir: number) => {
    const d = new Date(year, month + dir, 1);
    setYear(d.getFullYear()); setMonth(d.getMonth());
  };
  const monthName = new Date(year, month, 1).toLocaleString('default', { month: 'long', year: 'numeric' });
  const selItems = byDate[selected] ?? [];

  return (
    <div className="space-y-3">
      <div className="flex flex-wrap gap-2 items-center">
        <h1 className="page-title mr-auto">Calendar</h1>
        <button className="btn-ghost text-sm" onClick={() => shift(-1)}>‹ Prev</button>
        <b className="text-sm min-w-36 text-center">{monthName}</b>
        <button className="btn-ghost text-sm" onClick={() => shift(1)}>Next ›</button>
        <button className="btn-ghost text-sm" onClick={() => {
          setYear(now.getFullYear()); setMonth(now.getMonth()); setSelected(todayStr);
        }}>Today</button>
      </div>

      <div className="card !p-2 overflow-x-auto">
        <div className="grid grid-cols-7 gap-1 min-w-[560px]">
          {WEEKDAYS.map((w) => <p key={w} className="text-xs font-semibold text-slate-500 text-center py-1">{w}</p>)}
          {cells.map((d, i) => {
            if (!d) return <div key={`b${i}`} className="min-h-16 md:min-h-24 rounded bg-slate-50/50" />;
            const evts = byDate[d] ?? [];
            const isToday = d === todayStr;
            const isSel = d === selected;
            return (
              <button key={d} onClick={() => setSelected(d)}
                className={`min-h-16 md:min-h-24 rounded border p-1 text-left align-top hover:shadow ${isSel ? 'border-slate-900 ring-1 ring-slate-900' : 'border-slate-200'} ${isToday ? 'bg-blue-50/50' : ''}`}>
                <span className={`text-xs font-medium inline-block w-5 h-5 leading-5 text-center rounded-full ${isToday ? 'bg-slate-900 text-white' : 'text-slate-600'}`}>
                  {Number(d.slice(8, 10))}
                </span>
                <span className="hidden sm:block space-y-0.5 mt-0.5">
                  {evts.slice(0, 3).map((e: any, j: number) => (
                    <span key={j} className={`block truncate text-[11px] rounded px-1 ${chipColor(e)}`}>{e.title}</span>
                  ))}
                  {evts.length > 3 && <span className="block text-[11px] text-slate-500 px-1">+{evts.length - 3} more</span>}
                </span>
                <span className="sm:hidden flex gap-0.5 mt-1 flex-wrap">
                  {evts.slice(0, 4).map((e: any, j: number) => <span key={j} className={`w-1.5 h-1.5 rounded-full ${dotColor(e)}`} />)}
                  {evts.length > 4 && <span className="text-[10px] text-slate-500">+{evts.length - 4}</span>}
                </span>
              </button>
            );
          })}
        </div>
      </div>

      <div className="card">
        <h2 className="font-medium mb-2">{formatDate(selected)} <span className="text-slate-500 text-sm">({selItems.length} items)</span></h2>
        {!selItems.length && <p className="text-sm text-slate-500">Nothing scheduled.</p>}
        {selItems.map((e: any, i: number) => (
          <p key={i} className="text-sm border-t py-1.5 flex flex-wrap gap-2 items-center">
            <span className={`badge ${chipColor(e)}`}>{e.kind}</span>
            <span className="font-medium">{e.title}</span>
            <span className="text-slate-500 text-xs">({e.status})</span>
            {e.kind === 'deviation' && <Link href={`/actions/${e.id}`} className="text-xs underline ml-auto">Open</Link>}
          </p>
        ))}
      </div>

      <div className="flex flex-wrap gap-3 text-xs text-slate-500">
        <span><i className="inline-block w-2 h-2 rounded-full bg-blue-500 mr-1" />Deviation</span>
        <span><i className="inline-block w-2 h-2 rounded-full bg-amber-500 mr-1" />Testing</span>
        <span><i className="inline-block w-2 h-2 rounded-full bg-red-500 mr-1" />Overdue/Expired</span>
        <span><i className="inline-block w-2 h-2 rounded-full bg-green-500 mr-1" />Completed</span>
      </div>
    </div>
  );
}