import { Routes, Route, Link } from 'react-router-dom';
import { Toaster } from 'sonner';
import { CreateLedger } from './pages/CreateLedger';
import { LedgerView } from './pages/LedgerView';
import { getRecentLedgers } from './recent';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import { Item, ItemContent, ItemTitle } from '@/components/ui/item';

/* ── Inline SVG icons ───────────────────────────────────────────────────── */

function IconUserCheck() {
  return (
    <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="16" cy="14" r="5" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"/>
      <path d="M8 30c0-4.418 3.582-8 8-8 4.418 0 8 3.582 8 8" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"/>
      <path d="M27 20l4 5 7-8" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

function IconLock() {
  return (
    <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect x="10" y="18" width="20" height="16" rx="3" stroke="currentColor" strokeWidth="2.5"/>
      <path d="M14 18V13a6 6 0 0 1 12 0v5" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"/>
      <circle cx="20" cy="27" r="2.5" fill="currentColor"/>
      <path d="M20 30v3" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"/>
    </svg>
  );
}

function IconHeart() {
  return (
    <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M20 34S6 24 6 15.5C6 10.806 9.806 7 14.5 7c2.801 0 5.236 1.333 6.5 3.395C22.264 8.333 24.699 7 27.5 7 32.194 7 36 10.806 36 15.5 36 24 20 34 20 34z"
        stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

function IconGraph() {
  return (
    <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="14" cy="14" r="4" stroke="currentColor" strokeWidth="2.5"/>
      <circle cx="28" cy="12" r="3.5" stroke="currentColor" strokeWidth="2.5"/>
      <circle cx="28" cy="26" r="3.5" stroke="currentColor" strokeWidth="2.5"/>
      <circle cx="12" cy="28" r="3.5" stroke="currentColor" strokeWidth="2.5"/>
      <line x1="17.5" y1="15.5" x2="24.5" y2="13.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
      <line x1="26.5" y1="15.5" x2="27" y2="22.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
      <line x1="24.5" y1="25.5" x2="15.5" y2="26.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
      <line x1="14.5" y1="24.5" x2="13" y2="18" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
    </svg>
  );
}

/* ── Feature card data ──────────────────────────────────────────────────── */

const FEATURES = [
  {
    icon: <IconUserCheck />,
    title: 'No account required',
    body: "Splint won't ask you to sign up for anything — just create a ledger, share the invite link, and go.",
  },
  {
    icon: <IconLock />,
    title: 'End-to-end encrypted',
    body: 'You generate an encryption key on your device. All data gets encrypted before being uploaded. The server only sees ciphertext, and only people who know the key can read a ledger.',
  },
  {
    icon: <IconHeart />,
    title: 'Open Source',
    body: 'Splint is a single web server and database, shipped as a two-container compose file. You can run it on a server you own and hack on it.',
  },
  {
    icon: <IconGraph />,
    title: 'It looks cool',
    body: 'Every ledger gets a sick graph showing the flow of money and who-owes-who, making the settlements self-explanatory.',
  },
];

/* ── Landing page ───────────────────────────────────────────────────────── */

function Home() {
  const recents = getRecentLedgers();

  return (
    <div>
      {/* Hero section */}
      <section className="py-16 px-3">
        <div className="container max-w-6xl mx-auto">
          <div className="flex flex-col lg:flex-row gap-8 lg:gap-12">
            {/* Left: hero text */}
            <div className="flex-1 flex flex-col justify-center">
              <h1 className="text-4xl lg:text-5xl font-bold tracking-tight mb-4">
                Split expenses with style.
              </h1>
              <p className="text-lg text-muted-foreground max-w-xl">
                Keep track of your shared expenses and balances with friends instantly — no email required.
              </p>
            </div>

            {/* Right: CTA card */}
            <div className="flex-1 max-w-md w-full">
              <Card className="h-full">
                <CardContent className="p-6 space-y-4">
                  <Button variant="default" size="lg" className="w-full" asChild>
                    <Link to="/new">Create ledger</Link>
                  </Button>

                  {recents.length > 0 && (
                    <div className="font-semibold text-sm border-b border-border pb-1 mb-3">
                      Your ledgers
                    </div>
                  )}

                  {recents.length === 0 ? (
                    <p className="text-xs text-muted-foreground">
                      No ledgers yet. Create one to get started!
                    </p>
                  ) : (
                    <div role="list">
                      {recents.slice(0, 5).map((r) => (
                        <Item key={r.id} variant="default" size="xs" className="[a]:w-full" role="listitem" asChild>
                          <Link to={`/ledger/${r.id}`}>
                            <ItemContent>
                              <ItemTitle>
                                <span className="font-medium">{r.name}</span>
                                <span className="text-xs text-muted-foreground">Open →</span>
                              </ItemTitle>
                            </ItemContent>
                          </Link>
                        </Item>
                      ))}
                    </div>
                  )}

                  <p className="text-xs text-muted-foreground pt-2 border-t border-border">
                    Have an invite link? Just point your browser to it and continue!
                  </p>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

      <Separator className="my-8" />

      {/* Feature cards */}
      <section className="container max-w-6xl mx-auto px-3 pb-16">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {FEATURES.map((f, i) => (
            <Card key={i} className="p-6">
              <div className="flex items-center gap-3 mb-3">
                <div className="text-primary size-6">{f.icon}</div>
                <h3 className="font-semibold text-base">{f.title}</h3>
              </div>
              <p className="text-sm text-muted-foreground">{f.body}</p>
            </Card>
          ))}
        </div>
      </section>
    </div>
  );
}

/* ── App ─────────────────────────────────────────────────────────────────── */

export function App() {
  return (
    <>
      <Toaster
        position="bottom-right"
        toastOptions={{
          style: {
            background: 'var(--card)',
            color: 'var(--card-foreground)',
            border: '1px solid var(--border)',
            fontSize: '0.75rem',
          },
        }}
      />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/new" element={<CreateLedger />} />
        <Route path="/ledger/:id" element={<LedgerView />} />
      </Routes>
    </>
  );
}
