import React from 'react';
import { AlertCircle, CheckCircle2, Clock, Filter, Layers, Plus } from 'lucide-react';
import { getItemUrgency, getTodayDateString } from '../services/dateUtils';
import { Group, LifecycleItem } from '../services/types';
import { ItemRow } from './ItemRow';

interface DashboardViewProps {
  items: LifecycleItem[];
  groups: Group[];
  selectedGroupId: string | null | 'ALL';
  onSelectGroup: (groupId: string | null | 'ALL') => void;
  onToggleComplete: (id: string) => void;
  onEdit: (item: LifecycleItem) => void;
  onDelete: (id: string) => void;
  onOpenCreate: () => void;
}

export const DashboardView: React.FC<DashboardViewProps> = ({
  items,
  groups,
  selectedGroupId,
  onSelectGroup,
  onToggleComplete,
  onEdit,
  onDelete,
  onOpenCreate,
}) => {
  const todayStr = getTodayDateString();

  // Categorize items
  const overdueItems: LifecycleItem[] = [];
  const upcomingItems: LifecycleItem[] = [];
  const otherActiveItems: LifecycleItem[] = [];
  const completedItems: LifecycleItem[] = [];

  for (const item of items) {
    if (item.status === 'completed') {
      completedItems.push(item);
      continue;
    }

    const urgency = getItemUrgency(item, todayStr);
    if (urgency === 'overdue') {
      overdueItems.push(item);
    } else if (urgency === 'upcoming') {
      upcomingItems.push(item);
    } else {
      otherActiveItems.push(item);
    }
  }

  const totalActive = overdueItems.length + upcomingItems.length + otherActiveItems.length;

  return (
    <div className="space-y-8">
      {/* Scope Toolbar & Title */}
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
          <h1 className="text-2xl font-bold tracking-tight text-slate-900">Priority Action Dashboard</h1>
          <p className="text-xs text-slate-500 mt-1">
            Focusing on upcoming renewals, scheduled maintenance, and expiring warranties.
          </p>
        </div>

        {/* Scope Selector: All | Personal | Groups */}
        <div className="flex items-center gap-2 self-start md:self-auto">
          <Filter className="w-3.5 h-3.5 text-slate-400" />
          <span className="text-xs font-semibold text-slate-700">Scope:</span>
          <select
            value={selectedGroupId === 'ALL' ? 'ALL' : selectedGroupId === null ? 'PERSONAL' : selectedGroupId}
            onChange={(e) => {
              const val = e.target.value;
              if (val === 'ALL') onSelectGroup('ALL');
              else if (val === 'PERSONAL') onSelectGroup(null);
              else onSelectGroup(val);
            }}
            className="text-xs bg-white border border-slate-300 rounded-md px-2.5 py-1.5 font-medium text-slate-700 focus:outline-none focus:ring-1 focus:ring-slate-900"
          >
            <option value="ALL">All Accessible Items</option>
            <option value="PERSONAL">Personal Only</option>
            {groups.map((g) => (
              <option key={g.id} value={g.id}>
                Group: {g.name}
              </option>
            ))}
          </select>
        </div>
      </div>

      {/* KPI Metric Strip */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <div className="p-4 bg-white rounded-xl border border-slate-200">
          <div className="flex items-center justify-between text-xs font-medium text-slate-500">
            <span>Overdue Actions</span>
            <AlertCircle className="w-4 h-4 text-red-600" />
          </div>
          <div className="mt-2 text-2xl font-bold font-mono tabular-nums text-red-600">
            {overdueItems.length}
          </div>
          <div className="text-[11px] text-slate-400 mt-0.5">Remain until completed</div>
        </div>

        <div className="p-4 bg-white rounded-xl border border-slate-200">
          <div className="flex items-center justify-between text-xs font-medium text-slate-500">
            <span>Upcoming (30 Days)</span>
            <Clock className="w-4 h-4 text-amber-600" />
          </div>
          <div className="mt-2 text-2xl font-bold font-mono tabular-nums text-amber-700">
            {upcomingItems.length}
          </div>
          <div className="text-[11px] text-slate-400 mt-0.5">Included in daily digest</div>
        </div>

        <div className="p-4 bg-white rounded-xl border border-slate-200">
          <div className="flex items-center justify-between text-xs font-medium text-slate-500">
            <span>Total Active</span>
            <Layers className="w-4 h-4 text-slate-600" />
          </div>
          <div className="mt-2 text-2xl font-bold font-mono tabular-nums text-slate-900">
            {totalActive}
          </div>
          <div className="text-[11px] text-slate-400 mt-0.5">Across all lifecycle types</div>
        </div>

        <div className="p-4 bg-white rounded-xl border border-slate-200">
          <div className="flex items-center justify-between text-xs font-medium text-slate-500">
            <span>Completed Records</span>
            <CheckCircle2 className="w-4 h-4 text-emerald-600" />
          </div>
          <div className="mt-2 text-2xl font-bold font-mono tabular-nums text-emerald-700">
            {completedItems.length}
          </div>
          <div className="text-[11px] text-slate-400 mt-0.5">Retained in list</div>
        </div>
      </div>

      {/* Priority Section 1: Overdue Items */}
      <section className="bg-white rounded-xl border border-red-200 overflow-hidden shadow-2xs">
        <div className="px-6 py-4 bg-red-50/60 border-b border-red-200 flex items-center justify-between">
          <div className="flex items-center gap-2.5">
            <AlertCircle className="w-4 h-4 text-red-600" />
            <h2 className="text-sm font-bold uppercase tracking-wider text-red-900">
              Overdue Items ({overdueItems.length})
            </h2>
          </div>
          <span className="text-xs text-red-700 font-medium">Immediate attention required</span>
        </div>

        {overdueItems.length === 0 ? (
          <div className="p-8 text-center text-slate-500 text-xs">
            <CheckCircle2 className="w-6 h-6 text-emerald-600 mx-auto mb-2" />
            <p className="font-semibold text-slate-800">No overdue lifecycle items!</p>
            <p className="mt-0.5">All renewals, maintenance, and warranties are on track.</p>
          </div>
        ) : (
          <div>
            {overdueItems.map((item) => (
              <ItemRow
                key={item.id}
                item={item}
                onToggleComplete={onToggleComplete}
                onEdit={onEdit}
                onDelete={onDelete}
              />
            ))}
          </div>
        )}
      </section>

      {/* Priority Section 2: Upcoming Actions */}
      <section className="bg-white rounded-xl border border-slate-200 overflow-hidden shadow-2xs">
        <div className="px-6 py-4 bg-amber-50/40 border-b border-amber-200/60 flex items-center justify-between">
          <div className="flex items-center gap-2.5">
            <Clock className="w-4 h-4 text-amber-700" />
            <h2 className="text-sm font-bold uppercase tracking-wider text-amber-900">
              Upcoming Actions — Next 30 Days ({upcomingItems.length})
            </h2>
          </div>
          <span className="text-xs text-amber-800 font-medium">Scheduled for reminders</span>
        </div>

        {upcomingItems.length === 0 ? (
          <div className="p-8 text-center text-slate-500 text-xs">
            <p className="font-semibold text-slate-800">No upcoming items due in the next 30 days.</p>
            <p className="mt-0.5">Use "Track Item" to schedule your next renewal, service, or warranty.</p>
          </div>
        ) : (
          <div>
            {upcomingItems.map((item) => (
              <ItemRow
                key={item.id}
                item={item}
                onToggleComplete={onToggleComplete}
                onEdit={onEdit}
                onDelete={onDelete}
              />
            ))}
          </div>
        )}
      </section>

      {/* Section 3: All Active & Undated Records */}
      {otherActiveItems.length > 0 && (
        <section className="bg-white rounded-xl border border-slate-200 overflow-hidden shadow-2xs">
          <div className="px-6 py-4 bg-slate-50 border-b border-slate-200 flex items-center justify-between">
            <div className="flex items-center gap-2.5">
              <Layers className="w-4 h-4 text-slate-600" />
              <h2 className="text-sm font-bold text-slate-900">
                Scheduled & Undated Active Items ({otherActiveItems.length})
              </h2>
            </div>
            <span className="text-xs text-slate-500">Dates beyond 30 days or undated</span>
          </div>

          <div>
            {otherActiveItems.map((item) => (
              <ItemRow
                key={item.id}
                item={item}
                onToggleComplete={onToggleComplete}
                onEdit={onEdit}
                onDelete={onDelete}
              />
            ))}
          </div>
        </section>
      )}

      {/* Section 4: Completed Records (Retained in main list per Decision 8 & 28) */}
      <section className="bg-white rounded-xl border border-slate-200 overflow-hidden shadow-2xs">
        <div className="px-6 py-4 bg-slate-50/60 border-b border-slate-200 flex items-center justify-between">
          <div className="flex items-center gap-2.5">
            <CheckCircle2 className="w-4 h-4 text-emerald-600" />
            <h2 className="text-sm font-bold text-slate-900">
              Completed Records ({completedItems.length})
            </h2>
          </div>
          <span className="text-xs text-slate-500">Retained visible in main list</span>
        </div>

        {completedItems.length === 0 ? (
          <div className="p-6 text-center text-slate-400 text-xs">
            No completed items yet. Complete items using the checkmark.
          </div>
        ) : (
          <div>
            {completedItems.map((item) => (
              <ItemRow
                key={item.id}
                item={item}
                onToggleComplete={onToggleComplete}
                onEdit={onEdit}
                onDelete={onDelete}
              />
            ))}
          </div>
        )}
      </section>

      {/* Quick Action Footer if zero items */}
      {items.length === 0 && (
        <div className="p-12 text-center bg-white rounded-xl border border-slate-200">
          <h3 className="text-base font-semibold text-slate-900">No lifecycle items tracked yet</h3>
          <p className="text-xs text-slate-500 mt-1 max-w-sm mx-auto">
            Get started by tracking your first renewal, maintenance item, or product warranty.
          </p>
          <button
            onClick={onOpenCreate}
            className="mt-4 px-4 py-2 text-xs font-semibold text-white bg-slate-900 hover:bg-slate-800 rounded-lg inline-flex items-center gap-2 transition-colors"
          >
            <Plus className="w-4 h-4" />
            <span>Track First Item</span>
          </button>
        </div>
      )}
    </div>
  );
};