import { Alert } from "pettyui/alert";
import { Toast, toast } from "pettyui/toast";
import { Progress } from "pettyui/progress";
import { Meter } from "pettyui/meter";
import { ComponentDemo } from "../component-demo";

const btnBase = "px-3 py-1.5 text-sm font-medium rounded border";

/** Alert demo showing info, success, and error variants. */
function AlertDemo() {
  const content = (
    <div class="flex flex-col gap-2 w-full max-w-md">
      <Alert class="flex items-start gap-2 p-3 rounded border border-blue-200 bg-blue-50 text-blue-800 text-sm">
        <span class="font-semibold">Info:</span> Your session will expire in 5 minutes.
      </Alert>
      <Alert class="flex items-start gap-2 p-3 rounded border border-green-200 bg-green-50 text-green-800 text-sm">
        <span class="font-semibold">Success:</span> Your changes have been saved.
      </Alert>
      <Alert class="flex items-start gap-2 p-3 rounded border border-red-200 bg-red-50 text-red-800 text-sm">
        <span class="font-semibold">Error:</span> Failed to connect to the server.
      </Alert>
    </div>
  );
  return content;
}

/** Toast demo with imperative API triggering different toast types. */
function ToastDemo() {
  const content = (
    <div class="flex flex-col gap-3">
      <div class="flex gap-2 flex-wrap">
        <button type="button" class={`${btnBase} border-gray-300 hover:bg-gray-50`} onClick={() => toast("Action completed")}>Default</button>
        <button type="button" class={`${btnBase} border-green-300 text-green-700 hover:bg-green-50`} onClick={() => toast.success("Saved successfully!")}>Success</button>
        <button type="button" class={`${btnBase} border-red-300 text-red-700 hover:bg-red-50`} onClick={() => toast.error("Something went wrong")}>Error</button>
        <button type="button" class={`${btnBase} border-blue-300 text-blue-700 hover:bg-blue-50`} onClick={() => toast.loading("Loading...")}>Loading</button>
      </div>
      <Toast.Region class="fixed bottom-4 right-4 flex flex-col gap-2 z-50 w-72" />
    </div>
  );
  return content;
}

/** Progress demo showing a determinate bar at 60%. */
function ProgressDemo() {
  const content = (
    <div class="w-full max-w-md space-y-3">
      <div class="space-y-1">
        <div class="flex justify-between text-xs text-gray-500 mb-1">
          <span>Uploading file...</span>
          <span>60%</span>
        </div>
        <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
          <Progress value={60} class="h-full bg-indigo-600 rounded-full" style={{ width: "60%" }} />
        </div>
      </div>
      <div class="space-y-1">
        <div class="flex justify-between text-xs text-gray-500 mb-1">
          <span>Processing...</span>
          <span>indeterminate</span>
        </div>
        <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
          <Progress class="h-full bg-indigo-400 rounded-full w-1/3 animate-pulse" />
        </div>
      </div>
    </div>
  );
  return content;
}

/** Meter demo showing a scalar measurement at 75%. */
function MeterDemo() {
  const content = (
    <div class="w-full max-w-md space-y-3">
      <div class="space-y-1">
        <div class="flex justify-between text-xs text-gray-500 mb-1">
          <span>Disk usage</span>
          <span>75 / 100 GB</span>
        </div>
        <div class="h-3 bg-gray-200 rounded-full overflow-hidden">
          <Meter value={75} class="h-full bg-amber-500 rounded-full" style={{ width: "75%" }} />
        </div>
      </div>
      <div class="space-y-1">
        <div class="flex justify-between text-xs text-gray-500 mb-1">
          <span>Password strength</span>
          <span>Strong</span>
        </div>
        <div class="h-3 bg-gray-200 rounded-full overflow-hidden">
          <Meter value={90} class="h-full bg-green-500 rounded-full" style={{ width: "90%" }} />
        </div>
      </div>
    </div>
  );
  return content;
}

/** Feedback and Status section with notification and indicator components. */
export function FeedbackStatusSection() {
  const content = (
    <>
      <ComponentDemo name="Alert" description="Announces important messages to assistive technology via role=alert">
        <AlertDemo />
      </ComponentDemo>
      <ComponentDemo name="Toast" description="Ephemeral notifications triggered imperatively with toast() API">
        <ToastDemo />
      </ComponentDemo>
      <ComponentDemo name="Progress" description="Tracks completion of a task with determinate or indeterminate states">
        <ProgressDemo />
      </ComponentDemo>
      <ComponentDemo name="Meter" description="Displays a scalar measurement within a known range such as disk usage">
        <MeterDemo />
      </ComponentDemo>
    </>
  );
  return content;
}
