import { useState } from "react"
import { ProfilePage } from "@/components/ui/profile-page"
import { SegmentedControl } from "@/components/ui/segmented-control"
import { type ActivityDay } from "@/components/ui/activity-heatmap"

const wait = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));

function contributions(): ActivityDay[] {
  const start = Date.UTC(2025, 9, 13);
  return Array.from({ length: 364 }, (_, i) => {
    const date = new Date(start + i * 86_400_000).toISOString().slice(0, 10);
    const weekday = new Date(start + i * 86_400_000).getUTCDay();
    const wave = Math.sin(i / 9) + Math.cos(i / 23);
    const value = weekday === 0 || weekday === 6 ? (i % 11 === 0 ? 2 : 0) : Math.max(0, Math.round(3 + wave * 3 + ((i * 7) % 5) - 1));
    return { date, value };
  });
}

export function ProfilePageDemo() {
  const [self, setSelf] = useState(false);
  const [data] = useState(contributions);
  return (
    <div className="grid w-full max-w-4xl gap-4">
      <SegmentedControl className="w-fit" label="View as" value={self ? "self" : "visitor"} onValueChange={(value) => setSelf(value === "self")} options={[{ value: "visitor", label: "Visitor" }, { value: "self", label: "Owner" }]} />
      <ProfilePage
        key={String(self)}
        name="Amara Okafor"
        handle="amara"
        role="Design engineer at Halden"
        bio="I build the close review screens and the component library behind them. Previously at a freight start-up. Write to me about tables, keyboard shortcuts or Lisbon coffee."
        location="Lisbon, Portugal"
        timeZone="Europe/Lisbon"
        links={[{ label: "amara.design", href: "#site" }, { label: "Mastodon", href: "#mastodon" }]}
        followers={1284}
        stats={[{ label: "Following", value: 211 }, { label: "Projects", value: 6 }]}
        self={self}
        onFollowChange={async (next) => {
          await wait(500);
          if (!next) throw new Error("demo: unfollow fails once");
        }}
        onMessage={() => {}}
        onEdit={() => {}}
        projects={[
          { id: "1", name: "close-review", description: "The review queue for the first morning of the close: keys, undo and bulk approve.", tag: "TypeScript", stars: 342, updated: "2 days ago", href: "#p1" },
          { id: "2", name: "ledger-grid", description: "A virtualised ledger with frozen columns and inline matching.", tag: "React", stars: 1290, updated: "last week", href: "#p2" },
          { id: "3", name: "fx-rounding", description: "How Halden decides when a difference is just rounding.", tag: "Notes", stars: 58, href: "#p3" },
          { id: "4", name: "shortcut-sheet", description: "Every keyboard shortcut in the app, printable on one page.", tag: "Docs", stars: 77, href: "#p4" },
          { id: "5", name: "bank-icons", description: "Monochrome marks for 300 European banks.", tag: "SVG", stars: 401, href: "#p5" },
        ]}
        activity={[
          { id: "a1", day: "Today", time: "09:42", text: "Merged “Keep the review cursor after undo” in close-review" },
          { id: "a2", day: "Today", time: "08:15", text: "Commented on “Frozen columns jump on resize”" },
          { id: "a3", day: "Yesterday", time: "17:03", text: "Released ledger-grid 2.4.0" },
          { id: "a4", day: "Yesterday", time: "11:30", text: "Opened “Announce row counts after filtering”" },
          { id: "a5", day: "Monday", time: "14:22", text: "Starred bank-icons" },
        ]}
        contributions={data}
      />
      <p className="text-[13px] text-muted-foreground">Follow, then unfollow: the demo’s unfollow fails, and the count is put back.</p>
    </div>
  );
}