import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { toast } from 'sonner';
import {
  ArrowDown,
  ArrowUp,
  CalendarDays,
  CheckCircle2,
  ChevronLeft,
  ChevronRight,
  Edit3,
  GripVertical,
  Loader2,
  Minus,
  Printer,
  RotateCcw,
  Save,
} from 'lucide-react';
import { api } from '@/api.js';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { cn, fmt } from '@/lib/utils';
import { moveInArray, reorderPayload } from '@/lib/reorder';

const MONTHS = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December',
];

function selectedFromToday() {
  const now = new Date();
  return { year: now.getFullYear(), month: now.getMonth() + 1 };
}

function shiftMonth(year, month, delta) {
  const next = new Date(year, month - 1 + delta, 1);
  return { year: next.getFullYear(), month: next.getMonth() + 1 };
}

function monthLabel(year, month) {
  return `${MONTHS[month - 1]} ${year}`;
}

function moneyClass(value) {
  return value >= 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-destructive';
}

function StatusMark({ expense }) {
  if (expense.is_skipped) {
    return (
      <span className="inline-flex min-w-16 items-center justify-center rounded-full bg-muted px-2 py-1 text-xs font-medium text-muted-foreground">
        Skipped
      </span>
    );
  }

  if (expense.is_paid) {
    return (
      <span className="inline-flex min-w-16 items-center justify-center gap-1 rounded-full bg-emerald-500/10 px-2 py-1 text-xs font-semibold text-emerald-700 dark:text-emerald-300">
        <CheckCircle2 className="h-3.5 w-3.5" />
        Paid
      </span>
    );
  }

  return (
    <span className="inline-flex min-w-16 items-center justify-center gap-1 rounded-full bg-muted px-2 py-1 text-xs font-medium text-muted-foreground">
      <Minus className="h-3.5 w-3.5" />
      Open
    </span>
  );
}

function SummaryChart({ rows = [], onStartingClick }) {
  const max = Math.max(1, ...rows.map(row => Math.abs(Number(row.amount) || 0)));
  const chartRows = rows.map((row, index) => ({
    ...row,
    label: row.type === 'Remaining'
      ? Number(row.amount) >= 0 ? 'Remaining' : 'Shortfall'
      : row.type,
    color: index === 0
      ? 'hsl(var(--chart-1))'
      : index === 1
        ? 'hsl(var(--chart-3))'
        : Number(row.amount) >= 0
          ? 'hsl(var(--chart-2))'
          : 'hsl(var(--destructive))',
    width: Math.max(2, (Math.abs(Number(row.amount) || 0) / max) * 100),
  }));

  return (
    <div className="space-y-3">
      {chartRows.map(row => {
        const isStarting = row.type === 'Starting';
        const clickable  = isStarting && !!onStartingClick;
        return (
          <div key={row.type} className="grid gap-2 sm:grid-cols-[5.75rem_minmax(0,1fr)_7rem] sm:items-center">
            {clickable ? (
              <button
                type="button"
                onClick={onStartingClick}
                className="text-sm font-medium text-foreground text-left underline underline-offset-2 decoration-dashed decoration-muted-foreground/50 hover:text-primary transition-colors"
                title="Click to see income breakdown"
              >
                {row.label}
              </button>
            ) : (
              <div className="text-sm font-medium text-foreground">{row.label}</div>
            )}
            <div className="h-7 rounded-full bg-muted/70 p-1">
              <div
                className={cn('h-full rounded-full transition-[width]', clickable && 'cursor-pointer')}
                style={{ width: `${Math.min(row.width, 100)}%`, backgroundColor: row.color }}
                title={`${row.label}: ${fmt(row.amount)}`}
                onClick={clickable ? onStartingClick : undefined}
              />
            </div>
            <div className={cn('text-sm font-semibold sm:text-right', row.type === 'Remaining' ? moneyClass(row.amount) : 'text-foreground')}>
              {fmt(row.amount)}
            </div>
          </div>
        );
      })}
    </div>
  );
}

function ExpenseRow({ expense, moveControls, dragProps }) {
  return (
    <div
      draggable={dragProps?.draggable}
      onDragStart={dragProps?.onDragStart}
      onDragEnter={dragProps?.onDragEnter}
      onDragOver={dragProps?.onDragOver}
      onDragEnd={dragProps?.onDragEnd}
      onDrop={dragProps?.onDrop}
      className={cn(
        'summary-expense-row group grid gap-2 border-b border-border/60 px-1 py-3 last:border-0 sm:grid-cols-[auto_minmax(0,1fr)_7.5rem_5.5rem] sm:items-center',
        dragProps?.isDragging && 'opacity-45',
        dragProps?.isDropTarget && 'ring-2 ring-inset ring-primary/35',
      )}
    >
      <div className="summary-reorder-controls flex shrink-0 items-center gap-0.5 self-start sm:self-center">
        <GripVertical
          className={cn(
            'h-4 w-4 text-muted-foreground/55',
            moveControls?.enabled && 'cursor-grab group-active:cursor-grabbing',
            !moveControls?.enabled && 'opacity-30',
          )}
          aria-hidden="true"
        />
        <div className="flex flex-col">
          <button
            type="button"
            onClick={moveControls?.onMoveUp}
            disabled={!moveControls?.enabled || !moveControls?.canMoveUp || moveControls?.moving}
            className="rounded text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-25"
            title="Move expense up"
            aria-label={`Move ${expense.name} up`}
          >
            <ArrowUp className="h-3 w-3" />
          </button>
          <button
            type="button"
            onClick={moveControls?.onMoveDown}
            disabled={!moveControls?.enabled || !moveControls?.canMoveDown || moveControls?.moving}
            className="rounded text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-25"
            title="Move expense down"
            aria-label={`Move ${expense.name} down`}
          >
            <ArrowDown className="h-3 w-3" />
          </button>
        </div>
      </div>
      <div className="min-w-0">
        <div className="truncate text-sm font-semibold text-foreground">{expense.name}</div>
        <div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
          {expense.category_name && <span>{expense.category_name}</span>}
          <span>Due day {expense.due_day}</span>
          {expense.actual_amount !== null && <span>Monthly amount</span>}
        </div>
      </div>
      <div className="text-sm font-semibold text-foreground sm:text-right">{fmt(expense.display_amount)}</div>
      <div className="sm:justify-self-end" aria-label={expense.is_paid ? 'Paid' : expense.is_skipped ? 'Skipped' : 'Open'}>
        <StatusMark expense={expense} />
      </div>
    </div>
  );
}

export default function SummaryPage() {
  const [selected, setSelected] = useState(selectedFromToday);
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState('');
  const [startingFirst, setStartingFirst] = useState('0');
  const [startingFifteenth, setStartingFifteenth] = useState('0');
  const [startingOther, setStartingOther] = useState('0');
  const [editingStarting, setEditingStarting] = useState(false);
  const [draggingId, setDraggingId] = useState(null);
  const [dropTargetId, setDropTargetId] = useState(null);
  const [movingBillId, setMovingBillId] = useState(null);

  const loadSummary = useCallback(async () => {
    setLoading(true);
    setError('');
    try {
      const result = await api.summary(selected.year, selected.month);
      setData(result);
      setStartingFirst(String(result.starting_amounts?.first_amount ?? 0));
      setStartingFifteenth(String(result.starting_amounts?.fifteenth_amount ?? 0));
      setStartingOther(String(result.starting_amounts?.other_amount ?? 0));
      setEditingStarting(false);
      setDraggingId(null);
      setDropTargetId(null);
      setMovingBillId(null);
    } catch (err) {
      setError(err.message || 'Summary could not be loaded.');
      toast.error(err.message || 'Summary could not be loaded.');
    } finally {
      setLoading(false);
    }
  }, [selected.month, selected.year]);

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

  const summary = data?.summary || {};
  const expenses = data?.expenses || [];
  const starting = data?.starting_amounts || {};
  const reorderEnabled = !loading && !error && expenses.length > 1;

  const generatedLabel = useMemo(() => {
    if (!data?.generated_at) return '';
    return new Date(data.generated_at).toLocaleString();
  }, [data?.generated_at]);

  async function saveStartingAmounts() {
    const first = Number(startingFirst);
    const fifteenth = Number(startingFifteenth);
    const other = Number(startingOther);
    if (![first, fifteenth, other].every(value => Number.isFinite(value) && value >= 0)) {
      toast.error('Enter non-negative starting amounts.');
      return;
    }

    setSaving(true);
    try {
      await api.updateMonthlyStartingAmounts({
        year: selected.year,
        month: selected.month,
        first_amount: first,
        fifteenth_amount: fifteenth,
        other_amount: other,
      });
      toast.success('Starting amounts saved.');
      await loadSummary();
    } catch (err) {
      toast.error(err.message || 'Starting amounts could not be saved.');
    } finally {
      setSaving(false);
    }
  }

  function moveMonth(delta) {
    setSelected(current => shiftMonth(current.year, current.month, delta));
  }

  function resetToday() {
    setSelected(selectedFromToday());
  }

  async function persistExpenseOrder(nextExpenses, movedId) {
    setData(prev => prev ? { ...prev, expenses: nextExpenses } : prev);
    setMovingBillId(movedId);
    try {
      await api.reorderBills(reorderPayload(nextExpenses.map(expense => ({ id: expense.bill_id }))));
      toast.success('Summary order saved');
      await loadSummary();
    } catch (err) {
      toast.error(err.message || 'Failed to save summary order.');
      await loadSummary();
    } finally {
      setMovingBillId(null);
    }
  }

  function reorderExpenses(fromIndex, toIndex) {
    if (!reorderEnabled || fromIndex === toIndex) return;
    const nextExpenses = moveInArray(expenses, fromIndex, toIndex);
    persistExpenseOrder(nextExpenses, expenses[fromIndex]?.bill_id || null);
  }

  function moveControlsFor(expense, index) {
    return {
      enabled: reorderEnabled,
      moving: movingBillId === expense.bill_id,
      canMoveUp: index > 0,
      canMoveDown: index < expenses.length - 1,
      onMoveUp: () => reorderExpenses(index, index - 1),
      onMoveDown: () => reorderExpenses(index, index + 1),
    };
  }

  function dragPropsFor(expense, index) {
    if (!reorderEnabled) return { draggable: false };
    return {
      draggable: true,
      isDragging: draggingId === expense.bill_id,
      isDropTarget: dropTargetId === expense.bill_id && draggingId !== expense.bill_id,
      onDragStart: (event) => {
        setDraggingId(expense.bill_id);
        event.dataTransfer.effectAllowed = 'move';
        event.dataTransfer.setData('text/plain', String(expense.bill_id));
      },
      onDragEnter: () => {
        if (draggingId && draggingId !== expense.bill_id) setDropTargetId(expense.bill_id);
      },
      onDragOver: (event) => {
        event.preventDefault();
        event.dataTransfer.dropEffect = 'move';
        if (draggingId && draggingId !== expense.bill_id) setDropTargetId(expense.bill_id);
      },
      onDrop: (event) => {
        event.preventDefault();
        const sourceId = Number(event.dataTransfer.getData('text/plain') || draggingId);
        const fromIndex = expenses.findIndex(item => item.bill_id === sourceId);
        if (fromIndex >= 0) reorderExpenses(fromIndex, index);
        setDraggingId(null);
        setDropTargetId(null);
      },
      onDragEnd: () => {
        setDraggingId(null);
        setDropTargetId(null);
      },
    };
  }

  return (
    <div className="summary-page mx-auto max-w-3xl space-y-5">
      <div className="summary-print-meta hidden">
        <h1>BillTracker Summary</h1>
        <p>{monthLabel(selected.year, selected.month)}</p>
        {generatedLabel && <p>Generated {generatedLabel}</p>}
      </div>

      <div className="summary-screen-header flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight text-foreground">Summary</h1>
          <p className="mt-1 text-sm text-muted-foreground">Plan starting balance, expenses, and monthly result.</p>
        </div>
        <div className="summary-actions flex gap-2">
          <Button variant="outline" onClick={resetToday} className="sm:w-auto">
            <RotateCcw className="h-4 w-4" />
            Today
          </Button>
          <Button onClick={() => window.print()} className="sm:w-auto">
            <Printer className="h-4 w-4" />
            Print / PDF
          </Button>
        </div>
      </div>

      <div className="summary-controls mx-auto flex w-full max-w-md items-center justify-between gap-2 rounded-full border border-border/70 bg-card p-1.5 shadow-sm">
        <Button variant="ghost" size="icon" onClick={() => moveMonth(-1)} aria-label="Previous month">
          <ChevronLeft className="h-4 w-4" />
        </Button>
        <div className="flex min-w-0 flex-1 items-center justify-center gap-2 px-2 text-center">
          <CalendarDays className="hidden h-4 w-4 text-muted-foreground sm:block" />
          <div className="truncate text-base font-semibold text-foreground">{monthLabel(selected.year, selected.month)}</div>
        </div>
        <Button variant="ghost" size="icon" onClick={() => moveMonth(1)} aria-label="Next month">
          <ChevronRight className="h-4 w-4" />
        </Button>
      </div>

      {loading && (
        <Card>
          <CardContent className="flex min-h-72 items-center justify-center p-8 text-sm text-muted-foreground">
            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
            Loading summary...
          </CardContent>
        </Card>
      )}

      {!loading && error && (
        <Card className="border-destructive/40">
          <CardContent className="space-y-3 p-6">
            <p className="text-sm font-medium text-destructive">{error}</p>
            <Button variant="outline" onClick={loadSummary}>Retry</Button>
          </CardContent>
        </Card>
      )}

      {!loading && !error && data && (
        <>
          <Card className="summary-card">
            <CardHeader className="pb-3">
              <CardTitle className="text-xl">Monthly Plan</CardTitle>
              <CardDescription>{monthLabel(data.year, data.month)}</CardDescription>
            </CardHeader>

            <CardContent className="space-y-5">
              <section className="space-y-3">
                <div className="flex items-center justify-between gap-3">
                  <h2 className="text-xs font-semibold uppercase tracking-normal text-muted-foreground">Starting Balance</h2>
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
                    className="summary-edit-actions h-7 px-2"
                    onClick={() => setEditingStarting(value => !value)}
                  >
                    <Edit3 className="h-3.5 w-3.5" />
                    {editingStarting ? 'Close' : 'Edit'}
                  </Button>
                </div>

                <div className="grid gap-3 rounded-2xl bg-muted/45 p-4 sm:grid-cols-3">
                  <div>
                    <div className="text-xs font-medium text-muted-foreground">1st</div>
                    <div className="tracker-number mt-1 text-base font-bold text-foreground">{fmt(starting.first_amount)}</div>
                  </div>
                  <div>
                    <div className="text-xs font-medium text-muted-foreground">15th</div>
                    <div className="tracker-number mt-1 text-base font-bold text-foreground">{fmt(starting.fifteenth_amount)}</div>
                  </div>
                  <div>
                    <div className="text-xs font-medium text-muted-foreground">Other</div>
                    <div className="tracker-number mt-1 text-base font-bold text-foreground">{fmt(starting.other_amount)}</div>
                  </div>
                  <div className="border-t border-border/60 pt-3 sm:col-span-3">
                    <div className="grid gap-3 sm:grid-cols-3">
                      <div>
                        <div className="text-xs font-medium text-muted-foreground">Total starting</div>
                        <div className="tracker-number mt-1 text-lg font-bold text-foreground">{fmt(starting.combined_amount)}</div>
                      </div>
                      <div>
                        <div className="text-xs font-medium text-muted-foreground">Paid</div>
                        <div className="tracker-number mt-1 text-lg font-bold text-emerald-600 dark:text-emerald-300">{fmt(starting.paid_total)}</div>
                      </div>
                      <div>
                        <div className="text-xs font-medium text-muted-foreground">Total remaining</div>
                        <div className={cn('tracker-number mt-1 text-lg font-bold', moneyClass(starting.combined_remaining || 0))}>
                          {fmt(starting.combined_remaining)}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                {data.previous_month && (
                  <div className="rounded-xl border border-border/60 bg-background/70 px-3 py-2 text-xs text-muted-foreground">
                    Previous month remaining: {fmt(data.previous_month.combined_remaining)}
                  </div>
                )}

                {editingStarting && (
                  <div className="summary-income-form grid gap-3 rounded-2xl border border-border/60 bg-background/80 p-3 md:grid-cols-[1fr_1fr_1fr_auto] md:items-end">
                    <label className="space-y-1">
                      <span className="text-xs font-medium text-muted-foreground">1st</span>
                      <Input
                        type="number"
                        min="0"
                        step="0.01"
                        value={startingFirst}
                        onChange={event => setStartingFirst(event.target.value)}
                      />
                    </label>
                    <label className="space-y-1">
                      <span className="text-xs font-medium text-muted-foreground">15th</span>
                      <Input
                        type="number"
                        min="0"
                        step="0.01"
                        value={startingFifteenth}
                        onChange={event => setStartingFifteenth(event.target.value)}
                      />
                    </label>
                    <label className="space-y-1">
                      <span className="text-xs font-medium text-muted-foreground">Other</span>
                      <Input
                        type="number"
                        min="0"
                        step="0.01"
                        value={startingOther}
                        onChange={event => setStartingOther(event.target.value)}
                      />
                    </label>
                    <Button onClick={saveStartingAmounts} disabled={saving} className="summary-edit-actions w-full md:w-auto">
                      {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
                      Save
                    </Button>
                  </div>
                )}
              </section>

              <section className="space-y-3">
                <div className="flex items-end justify-between gap-3">
                  <div>
                    <h2 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Expenses</h2>
                    <p className="mt-1 text-xs text-muted-foreground">Skipped bills are shown but not counted.</p>
                  </div>
                  <div className="hidden text-xs font-semibold uppercase tracking-wide text-muted-foreground sm:block">
                    Paid
                  </div>
                </div>

                {expenses.length === 0 ? (
                  <div className="rounded-xl border border-dashed border-border p-6 text-sm text-muted-foreground">
                    No bills found for this month.
                  </div>
                ) : (
                  <div className="rounded-2xl border border-border/60 bg-background/70 px-3">
                    {expenses.map((expense, index) => (
                      <ExpenseRow
                        key={expense.bill_id}
                        expense={expense}
                        moveControls={moveControlsFor(expense, index)}
                        dragProps={dragPropsFor(expense, index)}
                      />
                    ))}
                  </div>
                )}
              </section>

              <section className="space-y-3 rounded-2xl border border-border/60 bg-muted/40 p-4">
                <div className="flex items-center justify-between gap-4">
                  <div className="text-sm font-medium text-muted-foreground">Fully Paid Expenses</div>
                  <div className="text-base font-bold text-foreground">{summary.paid_expense_count || 0} / {summary.expense_count || 0}</div>
                </div>
                <div className="flex items-center justify-between gap-4">
                  <div className="text-sm font-medium text-muted-foreground">Expenses</div>
                  <div className="text-base font-semibold text-foreground">{fmt(summary.expense_total)}</div>
                </div>
                <div className="flex items-center justify-between gap-4 border-t border-border/60 pt-3">
                  <div className="text-base font-semibold text-foreground">Result</div>
                  <div className={cn('text-2xl font-bold', moneyClass(summary.result || 0))}>{fmt(summary.result)}</div>
                </div>
              </section>

              <Button onClick={() => window.print()} className="summary-actions w-full">
                <Printer className="h-4 w-4" />
                Print / PDF
              </Button>
            </CardContent>
          </Card>

          <Card className="summary-chart-card">
            <CardHeader className="pb-3">
              <CardTitle className="text-xl">Total amount per type</CardTitle>
              <CardDescription>
                Starting balance, planned expenses, and {Number(summary.result || 0) >= 0 ? 'remaining' : 'shortfall'} for {monthLabel(data.year, data.month)}.
              </CardDescription>
            </CardHeader>
            <CardContent>
              <SummaryChart rows={data.chart || []} />
            </CardContent>
          </Card>

          <div className="summary-print-footer hidden text-xs text-muted-foreground">
            Generated {generatedLabel || 'now'}
          </div>
        </>
      )}

    </div>
  );
}