import React, { useEffect, useRef, useState } from 'react';
import {
  AlertTriangleIcon,
  CheckCircle2Icon,
  FileSpreadsheetIcon,
  Loader2Icon,
  UndoIcon,
  UploadIcon,
} from 'lucide-react';
import { toast } from 'sonner';

import { Button } from '../components/ui/button';
import { Callout, ErrorCallout } from '../components/ui/callout';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '../components/ui/table';
import type {
  IPriceJob,
  IPricePreview,
  IPriceRow,
} from '../service/prices/prices.interface';
import {
  applyPrices,
  getPriceJob,
  listPriceJobs,
  previewPrices,
  undoPrices,
} from '../service/prices/prices.service';

/** How often the page asks how far the import has got. */
const POLL_MS = 2_000;

/** How many rows the preview draws; the totals count them all. */
const MAX_VISIBLE = 200;

/** The order the preview reads in: what needs a decision comes first. */
const STATUS_ORDER: Record<IPriceRow['status'], number> = {
  invalid: 0,
  change: 1,
  not_found: 2,
  nochange: 3,
};

/** What each verdict looks like. */
const STATUS_STYLE: Record<
  IPriceRow['status'],
  { label: string; chip: string }
> = {
  change: { label: 'Will change', chip: 'bg-brand/10 text-brand' },
  nochange: { label: 'Already right', chip: 'bg-muted text-muted-foreground' },
  not_found: { label: 'No such SKU', chip: 'bg-muted text-muted-foreground' },
  invalid: { label: 'Refused', chip: 'bg-amber-400/20 text-amber-700' },
};

/**
 * One price, as the table prints it.
 *
 * @param props - Component props.
 * @param props.regular - The normal price.
 * @param props.sale - The reduced price, when there is one.
 * @return The pair.
 */
const Price = ({
  regular,
  sale,
}: {
  regular: string;
  sale: string;
}): JSX.Element => (
  <span className="tabular-nums">
    <span className={sale !== '' ? 'text-muted-foreground line-through' : ''}>
      {regular === '' ? '—' : regular}
    </span>
    {sale !== '' && <span className="ml-1.5 font-medium">{sale}</span>}
  </span>
);

/**
 * Prices from a spreadsheet.
 *
 * The supplier sends a file, or the sale is planned in a sheet, and the shop
 * changes two hundred prices by hand. This reads the file, says exactly what
 * would change before anything is written, applies it in the background, and
 * keeps every previous price so the whole import can be taken back.
 *
 * @return The page.
 */
const PriceImport = (): JSX.Element => {
  const [fileName, setFileName] = useState('');
  const [preview, setPreview] = useState<IPricePreview | null>(null);
  const [reading, setReading] = useState(false);
  const [error, setError] = useState('');
  const [job, setJob] = useState<IPriceJob | null>(null);
  const [undoing, setUndoing] = useState('');
  const [past, setPast] = useState<IPriceJob[]>([]);
  const inputRef = useRef<HTMLInputElement>(null);

  // What was imported before, so an undo survives a reload.
  const refreshPast = (): void => {
    void listPriceJobs()
      .then(result => setPast(result.jobs))
      .catch(() => undefined);
  };
  useEffect(refreshPast, []);

  // Follow the import while it runs, and stop the moment it lands.
  useEffect(() => {
    if (!job || (job.status !== 'pending' && job.status !== 'running')) {
      return undefined;
    }
    const handle: number = window.setInterval(() => {
      void getPriceJob(job.job_id)
        .then(next => {
          setJob(next);
          if (next.status === 'done') refreshPast();
        })
        .catch(() => undefined);
    }, POLL_MS);

    return () => window.clearInterval(handle);
  }, [job]);

  const read = async (file: File): Promise<void> => {
    setReading(true);
    setError('');
    setJob(null);
    setPreview(null);
    setFileName(file.name);
    try {
      setPreview(await previewPrices(await file.text()));
    } catch (reason) {
      setError((reason as Error).message);
    } finally {
      setReading(false);
    }
  };

  const apply = async (): Promise<void> => {
    if (!preview) return;
    setError('');
    try {
      setJob(await applyPrices(preview.items, fileName));
    } catch (reason) {
      setError((reason as Error).message);
    }
  };

  const takeBack = async (jobId: string): Promise<void> => {
    setUndoing(jobId);
    try {
      const { restored } = await undoPrices(jobId);
      toast.success(
        `${restored} ${restored === 1 ? 'price' : 'prices'} put back.`
      );
      const updated: IPriceJob = await getPriceJob(jobId);
      if (job?.job_id === jobId) setJob(updated);
      refreshPast();
    } catch (reason) {
      toast.error((reason as Error).message);
    } finally {
      setUndoing('');
    }
  };

  const rows: IPriceRow[] = (preview?.items ?? [])
    .slice()
    .sort(
      (left, right) => STATUS_ORDER[left.status] - STATUS_ORDER[right.status]
    )
    .slice(0, MAX_VISIBLE);
  const totals = preview?.totals;
  const running: boolean =
    job !== null && (job.status === 'pending' || job.status === 'running');

  return (
    <div className="@container mx-auto flex w-full max-w-5xl flex-col gap-6 px-6 py-6 @2xl:px-8">
      <div>
        <h1 className="text-2xl font-semibold tracking-tight text-foreground">
          Prices from a file
        </h1>
        <p className="mt-1 text-sm text-muted-foreground">
          A spreadsheet with a <code>sku</code> column, a{' '}
          <code>regular_price</code> for the normal price and a{' '}
          <code>sale_price</code> for the reduced one (<code>pret_vechi</code>{' '}
          and <code>pret_nou</code> work too). Variations match by their own
          SKU. Nothing is written until you have read what changes.
        </p>
      </div>

      <div className="flex flex-wrap items-center gap-3 rounded-2xl border border-border bg-card p-4">
        <input
          ref={inputRef}
          type="file"
          accept=".csv,text/csv,text/plain"
          className="hidden"
          onChange={event => {
            const file = event.target.files?.[0];
            if (file) void read(file);
            event.target.value = '';
          }}
        />
        <Button onClick={() => inputRef.current?.click()} disabled={reading}>
          {reading ? <Loader2Icon className="animate-spin" /> : <UploadIcon />}
          Choose a file
        </Button>
        {fileName !== '' && (
          <span className="flex items-center gap-1.5 text-sm text-muted-foreground">
            <FileSpreadsheetIcon className="h-4 w-4" />
            {fileName}
          </span>
        )}
      </div>

      {error !== '' && <ErrorCallout message={error} />}

      {totals && (
        <div className="flex flex-col gap-4">
          <div className="grid grid-cols-2 gap-3 @2xl:grid-cols-4">
            {[
              { label: 'Will change', value: totals.change },
              { label: 'Already right', value: totals.nochange },
              { label: 'No such SKU', value: totals.not_found },
              { label: 'Refused', value: totals.invalid },
            ].map(cell => (
              <div
                key={cell.label}
                className="rounded-xl border border-border bg-card px-4 py-3"
              >
                <p className="text-xs text-muted-foreground">{cell.label}</p>
                <p className="text-xl font-semibold text-foreground tabular-nums">
                  {cell.value}
                </p>
              </div>
            ))}
          </div>

          {totals.stale > 0 && (
            <Callout tone="warning" className="flex items-start gap-3">
              <AlertTriangleIcon className="mt-0.5 h-4 w-4 shrink-0 text-amber-600" />
              <p className="text-sm text-foreground">
                {totals.stale} {totals.stale === 1 ? 'row has' : 'rows have'} a
                normal price the shop does not agree with - the file may have
                been written before somebody changed those prices by hand. They
                are still applied if you go ahead.
              </p>
            </Callout>
          )}

          {job === null && (
            <div>
              <Button
                onClick={() => void apply()}
                disabled={totals.change === 0}
              >
                Change {totals.change}{' '}
                {totals.change === 1 ? 'price' : 'prices'}
              </Button>
            </div>
          )}
        </div>
      )}

      {job && (
        <div className="flex flex-col gap-3 rounded-2xl border border-border bg-card p-4">
          <div className="flex items-center gap-3">
            {running ? (
              <Loader2Icon className="h-5 w-5 shrink-0 animate-spin text-brand" />
            ) : (
              <CheckCircle2Icon className="h-5 w-5 shrink-0 text-brand" />
            )}
            <div className="min-w-0 flex-1">
              <p className="text-sm font-semibold text-foreground">
                {job.undone
                  ? 'Import taken back'
                  : running
                    ? 'Changing prices…'
                    : 'Prices changed'}
              </p>
              <p className="text-xs text-muted-foreground tabular-nums">
                {job.written} of {job.total} written
                {job.failed > 0 && `, ${job.failed} failed`}
              </p>
            </div>
            {job.can_undo && (
              <Button
                variant="outline"
                size="sm"
                disabled={undoing !== ''}
                onClick={() => void takeBack(job.job_id)}
              >
                {undoing === job.job_id ? (
                  <Loader2Icon className="animate-spin" />
                ) : (
                  <UndoIcon />
                )}
                Undo this import
              </Button>
            )}
          </div>
          <div className="h-1 overflow-hidden rounded-full bg-muted">
            <div
              className="h-full rounded-full bg-linear-to-r from-pink-500 to-brand transition-[width]"
              style={{
                width: `${job.total === 0 ? 100 : Math.round((job.written / job.total) * 100)}%`,
              }}
            />
          </div>
        </div>
      )}

      {past.length > 0 && (
        <section className="flex flex-col gap-3">
          <h2 className="text-sm font-semibold text-foreground">
            Imports you have run
          </h2>
          <div className="overflow-hidden rounded-2xl border border-border bg-card">
            {past.map((entry: IPriceJob, index: number) => (
              <div
                key={entry.job_id}
                className={`flex flex-wrap items-center gap-3 px-4 py-3 ${index > 0 ? 'border-t border-border' : ''}`}
              >
                <FileSpreadsheetIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
                <div className="min-w-0 flex-1">
                  <p className="truncate text-sm text-foreground">
                    {entry.file || 'A price file'}
                  </p>
                  <p className="text-xs text-muted-foreground tabular-nums">
                    {entry.created_at
                      ? new Date(entry.created_at * 1000).toLocaleString()
                      : ''}
                    {' · '}
                    {entry.undone
                      ? 'taken back'
                      : `${entry.written} of ${entry.total} written`}
                  </p>
                </div>
                {entry.can_undo && (
                  <Button
                    variant="outline"
                    size="xs"
                    disabled={undoing !== ''}
                    onClick={() => void takeBack(entry.job_id)}
                  >
                    {undoing === entry.job_id ? (
                      <Loader2Icon className="animate-spin" />
                    ) : (
                      <UndoIcon />
                    )}
                    Undo
                  </Button>
                )}
              </div>
            ))}
          </div>
        </section>
      )}

      {rows.length > 0 && (
        <div className="overflow-hidden rounded-2xl border border-border bg-card">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>SKU</TableHead>
                <TableHead>Product</TableHead>
                <TableHead>Now</TableHead>
                <TableHead>After</TableHead>
                <TableHead>Verdict</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {rows.map((row: IPriceRow, index: number) => (
                <TableRow key={`${row.sku}-${index}`}>
                  <TableCell className="font-mono text-xs">{row.sku}</TableCell>
                  <TableCell className="max-w-[18rem] truncate">
                    {row.name || '—'}
                  </TableCell>
                  <TableCell>
                    <Price regular={row.from.regular} sale={row.from.sale} />
                  </TableCell>
                  <TableCell>
                    {row.status === 'change' ? (
                      <Price regular={row.to.regular} sale={row.to.sale} />
                    ) : (
                      <span className="text-muted-foreground">—</span>
                    )}
                  </TableCell>
                  <TableCell>
                    <span
                      className={`rounded-md px-2 py-0.5 text-[11px] font-semibold ${STATUS_STYLE[row.status].chip}`}
                    >
                      {STATUS_STYLE[row.status].label}
                    </span>
                    {row.note !== '' && (
                      <p className="mt-1 text-xs text-muted-foreground">
                        {row.note}
                      </p>
                    )}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
          {(preview?.items.length ?? 0) > MAX_VISIBLE && (
            <p className="border-t border-border px-4 py-3 text-xs text-muted-foreground">
              Showing the first {MAX_VISIBLE} of {preview?.items.length} rows;
              the counts above cover the whole file.
            </p>
          )}
        </div>
      )}
    </div>
  );
};

export default PriceImport;