import { useCoreServices } from '@learnitive/context';
import {
  Button,
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  Input,
  Label,
  toast,
} from '@learnitive/ui-components';
import { useAtomValue } from 'jotai';
import { CheckCircle2, Crown, LoaderCircle, RefreshCw } from 'lucide-react';
import React from 'react';

export function ProLicenseDialog({
  open,
  onOpenChange,
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}) {
  const { projectEntitlements } = useCoreServices();
  const state = useAtomValue(projectEntitlements.$state);
  const [licenseKey, setLicenseKey] = React.useState('');
  const [busy, setBusy] = React.useState(false);

  const activate = async () => {
    setBusy(true);
    try {
      await projectEntitlements.activate(licenseKey);
      setLicenseKey('');
      toast.success(t.app.pro.activated);
    } catch (reason) {
      toast.error(reason instanceof Error ? reason.message : t.app.pro.activationFailed);
    } finally {
      setBusy(false);
    }
  };

  const refresh = async () => {
    setBusy(true);
    try {
      const ok = await projectEntitlements.refresh();
      if (ok) toast.success(t.app.pro.refreshed);
      else toast.error(t.app.pro.refreshFailed);
    } finally {
      setBusy(false);
    }
  };

  const pro = state.tier === 'pro';
  const licensePayload = state.payload;
  const accountManagedAccess = pro && state.accountSource !== undefined;
  const administratorAccess = pro && state.accountSource === 'admin';
  const entitlementSourceLabel = administratorAccess
    ? 'Administrator role'
    : accountManagedAccess
      ? 'Account licence'
      : licensePayload?.source === 'payhip'
        ? 'Payhip'
        : t.app.pro.predefined;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md" data-testid="interactive-pro-dialog">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Crown className="size-5" />
            {t.app.pro.title}
          </DialogTitle>
          <DialogDescription>{t.app.pro.description}</DialogDescription>
        </DialogHeader>

        {state.status === 'loading' ? (
          <div className="flex items-center gap-2 py-6 text-sm text-muted-foreground">
            <LoaderCircle className="size-4 animate-spin" />
            {t.app.pro.checking}
          </div>
        ) : pro ? (
          <div className="space-y-4">
            <div className="rounded-lg border bg-muted/30 p-3 text-sm">
              <div className="flex items-center gap-2 font-medium text-emerald-700 dark:text-emerald-400">
                <CheckCircle2 className="size-4" />
                {t.app.pro.active}
              </div>
              <dl className="mt-3 grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-xs">
                <dt className="text-muted-foreground">{t.app.pro.source}</dt>
                <dd>{entitlementSourceLabel}</dd>
                {licensePayload ? (
                  <>
                    <dt className="text-muted-foreground">{t.app.pro.fingerprint}</dt>
                    <dd className="font-mono">{licensePayload.licenseFingerprint}</dd>
                    <dt className="text-muted-foreground">{t.app.pro.offlineUntil}</dt>
                    <dd>{new Date(licensePayload.validUntil * 1000).toLocaleDateString()}</dd>
                  </>
                ) : null}
              </dl>
            </div>
            <p className="text-xs text-muted-foreground">
              {administratorAccess
                ? 'All Learnitive Pro features are enabled for this administrator account for testing.'
                : accountManagedAccess
                  ? 'Learnitive Pro is linked to this signed-in account.'
                  : t.app.pro.offlineExplanation}
            </p>
          </div>
        ) : (
          <div className="space-y-4">
            <div className="rounded-lg border bg-muted/30 p-3 text-sm">
              <p className="font-medium">{t.app.pro.lifetime}</p>
              <p className="mt-1 text-xs text-muted-foreground">{t.app.pro.includes}</p>
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="interactive-pro-key">{t.app.pro.licenseKey}</Label>
              <Input
                id="interactive-pro-key"
                autoComplete="off"
                value={licenseKey}
                placeholder="LEARNITIVE-PRO-…"
                onChange={(event) => setLicenseKey(event.currentTarget.value)}
                onKeyDown={(event) => {
                  if (event.key === 'Enter' && licenseKey.trim()) void activate();
                }}
              />
              <p className="text-xs text-muted-foreground">{t.app.pro.keyPrivacy}</p>
            </div>
            {state.error && <p className="text-xs text-destructive">{state.error}</p>}
          </div>
        )}

        <DialogFooter>
          {state.status === 'loading' ? null : pro ? (
            accountManagedAccess ? (
              <Button variant="outline" disabled={busy || state.refreshing} onClick={() => void refresh()}>
                {busy || state.refreshing ? <LoaderCircle className="mr-2 size-4 animate-spin" /> : <RefreshCw className="mr-2 size-4" />}
                Refresh account access
              </Button>
            ) : (
              <>
                <Button variant="outline" disabled={busy || state.refreshing} onClick={() => void refresh()}>
                  {busy || state.refreshing ? <LoaderCircle className="mr-2 size-4 animate-spin" /> : <RefreshCw className="mr-2 size-4" />}
                  {t.app.pro.refresh}
                </Button>
                <Button variant="ghost" onClick={() => projectEntitlements.deactivate()}>
                  {t.app.pro.deactivate}
                </Button>
              </>
            )
          ) : (
            <Button disabled={busy || !licenseKey.trim()} onClick={() => void activate()}>
              {busy && <LoaderCircle className="mr-2 size-4 animate-spin" />}
              {t.app.pro.activate}
            </Button>
          )}
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}