'use client';

import React from 'react';
import { useRouter } from 'next/navigation';
import { useDispatch } from 'react-redux';
import { useTranslation } from 'react-i18next';
import { Plus, Cpu, Calendar, AlertTriangle, ChevronRight } from 'lucide-react';
import { WizardHeader, PageLoader } from '@/components/teltoinstall/_index';
import { useInstallationRequests } from '@/hooks/teltoinstall/_index';
import { resetInstallation } from '@/store/slices/installation-slice';
import { InstallationRequestSummary } from '@/models/teltoinstall/_index';
import RequestStatusBadge, { REQUEST_STATUS_STYLES } from './RequestStatusBadge';

function formatReceivedDate(value?: string | null): string {
  if (!value) return '—';
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return value;
  return date.toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' });
}

function RequestCard({
  request,
  onClick,
}: {
  request: InstallationRequestSummary;
  onClick: () => void;
}) {
  const { t } = useTranslation();
  const style = REQUEST_STATUS_STYLES[request.status] ?? REQUEST_STATUS_STYLES.pending;
  const title = request.order_reference || request.company_name || t('requests.untitled');
  const subtitle = request.order_reference ? request.company_name : null;

  // Une commande peut mélanger plusieurs types de boîtiers : `box_type` ne
  // reflète que le premier. On n'affiche un nom que s'il n'y en a qu'un seul,
  // sinon un libellé générique « N types de boîtiers ».
  const boxes = request.boxes ?? [];
  const boxLabel =
    boxes.length > 1
      ? t('requests.boxTypesCount', { count: boxes.length })
      : boxes[0]?.name ?? request.box_type;

  return (
    <button
      type="button"
      onClick={onClick}
      className={`relative w-full text-left bg-white rounded-xl shadow-sm border border-border border-l-4 ${style.border} overflow-hidden animate-slide-in active:scale-[0.99] transition-transform`}
    >
      <ChevronRight className="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />

      <div className="p-4 pr-10">
        {/* Header : référence + badge statut */}
        <div className="flex items-start justify-between gap-3">
          <div className="min-w-0">
            <div className="flex items-center gap-2 flex-wrap">
              <h3 className="text-base font-bold text-foreground truncate">{title}</h3>
              {request.status === 'pending' && (
                <span className="text-[10px] font-bold uppercase tracking-wide px-1.5 py-0.5 rounded bg-blue-100 text-blue-700">
                  {t('requests.new')}
                </span>
              )}
            </div>
            {subtitle && (
              <p className="text-xs text-muted-foreground mt-0.5 font-mono truncate">{subtitle}</p>
            )}
          </div>
          <RequestStatusBadge status={request.status} />
        </div>

        {/* Chip type de boîtier */}
        {boxLabel && (
          <div className="mt-3 flex items-center gap-2">
            <Cpu className="w-4 h-4 text-primary shrink-0" />
            <span className="inline-flex items-center px-2.5 py-1 rounded-full bg-blue-50 text-primary text-xs font-medium border border-blue-100">
              {boxLabel} · {t('requests.qty', { count: request.vehicles_count })}
            </span>
          </div>
        )}

        {/* Pied : date de réception */}
        <div className="mt-3 pt-3 border-t border-border flex items-center gap-3 text-xs text-muted-foreground">
          <div className="flex items-center gap-1.5 shrink-0">
            <Calendar className="w-3.5 h-3.5 shrink-0" />
            <span>{t('requests.receivedOn', { date: formatReceivedDate(request.created_at) })}</span>
          </div>
        </div>
      </div>
    </button>
  );
}

export default function InstallationRequestsView() {
  const { t } = useTranslation();
  const router = useRouter();
  const dispatch = useDispatch();
  const { requests, loading, error } = useInstallationRequests();

  const startNew = () => {
    dispatch(resetInstallation());
    router.push('/installation');
  };

  return (
    <div className="h-screen flex flex-col bg-background">
      <div className="flex-shrink-0">
        <WizardHeader />
      </div>

      <div className="flex-1 overflow-y-auto">
        <div className="w-full px-4 pt-4 pb-2">
          <h2 className="text-lg font-bold text-foreground leading-tight">{t('requests.title')}</h2>
          <p className="text-sm text-muted-foreground">
            {t('requests.subtitle', { count: requests.length })}
          </p>
        </div>

        <div className="w-full px-4 pb-28">
          {loading ? (
            <PageLoader />
          ) : error ? (
            <div className="flex items-center gap-2 p-3 bg-red-50 border border-red-200 rounded-lg">
              <AlertTriangle className="w-4 h-4 text-red-600 shrink-0" />
              <p className="text-sm text-red-600">{t(error)}</p>
            </div>
          ) : requests.length === 0 ? (
            <div className="flex flex-col items-center justify-center text-center py-16 px-6">
              <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                <Calendar className="w-8 h-8 text-primary" />
              </div>
              <p className="text-base font-semibold text-foreground">{t('requests.empty')}</p>
              <p className="text-sm text-muted-foreground mt-1 max-w-xs">{t('requests.emptyHint')}</p>
            </div>
          ) : (
            <div className="space-y-3">
              {requests.map((request) => (
                <RequestCard
                  key={request.id}
                  request={request}
                  onClick={() => router.push(`/installation-requests/${request.id}`)}
                />
              ))}
            </div>
          )}
        </div>
      </div>

      <div className="flex-shrink-0 bg-white border-t border-border px-4 py-3 shadow-lg z-20">
        <div className="max-w-lg mx-auto">
          <button
            type="button"
            onClick={startNew}
            className="btn-primary flex items-center justify-center gap-2"
          >
            <Plus className="w-4 h-4" />
            {t('history.newInstallation')}
          </button>
        </div>
      </div>
    </div>
  );
}