import Link from 'next/link';

import { createClient } from '@supabase/supabase-js';

import { UserCircle, FileText, CreditCard, Shield } from 'lucide-react';

import { PortalLoginForm } from '@kit/site-builder/components';
import { Button } from '@kit/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';

interface Props {
  params: Promise<{ slug: string }>;
}

export default async function MemberPortalPage({ params }: Props) {
  const { slug } = await params;

  const supabase = createClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_PUBLIC_KEY!,
  );

  const { data: account } = await supabase
    .from('accounts')
    .select('id, name')
    .eq('slug', slug)
    .single();
  if (!account)
    return <div className="p-8 text-center">Organisation nicht gefunden</div>;

  // Check if user is already logged in
  const {
    data: { user },
  } = await supabase.auth.getUser();

  if (user) {
    // Check if this user is a member of this club
    const { data: member } = await supabase
      .from('members')
      .select('id, first_name, last_name, status')
      .eq('account_id', account.id)
      .eq('user_id', user.id)
      .maybeSingle();

    if (member) {
      // Logged in member — show portal dashboard
      return (
        <div className="bg-muted/30 min-h-screen">
          <header className="bg-background border-b px-6 py-4">
            <div className="mx-auto flex max-w-4xl items-center justify-between">
              <div className="flex items-center gap-3">
                <Shield className="text-primary h-5 w-5" />
                <h1 className="text-lg font-bold">
                  Mitgliederbereich — {String(account.name)}
                </h1>
              </div>
              <div className="flex items-center gap-3">
                <span className="text-muted-foreground text-sm">
                  {String(member.first_name)} {String(member.last_name)}
                </span>
                <Link href={`/club/${slug}`}>
                  <Button variant="ghost" size="sm">
                    ← Website
                  </Button>
                </Link>
              </div>
            </div>
          </header>
          <main className="mx-auto max-w-4xl px-6 py-12">
            <h2 className="mb-6 text-2xl font-bold">
              Willkommen, {String(member.first_name)}!
            </h2>
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
              <Link href={`/club/${slug}/portal/profile`}>
                <Card className="hover:border-primary cursor-pointer transition-colors">
                  <CardContent className="p-6 text-center">
                    <UserCircle className="text-primary mx-auto mb-3 h-10 w-10" />
                    <h3 className="font-semibold">Mein Profil</h3>
                    <p className="text-muted-foreground mt-1 text-xs">
                      Kontaktdaten und Datenschutz
                    </p>
                  </CardContent>
                </Card>
              </Link>
              <Link href={`/club/${slug}/portal/documents`}>
                <Card className="hover:border-primary cursor-pointer transition-colors">
                  <CardContent className="p-6 text-center">
                    <FileText className="text-primary mx-auto mb-3 h-10 w-10" />
                    <h3 className="font-semibold">Dokumente</h3>
                    <p className="text-muted-foreground mt-1 text-xs">
                      Rechnungen und Bescheinigungen
                    </p>
                  </CardContent>
                </Card>
              </Link>
              <Card>
                <CardContent className="p-6 text-center">
                  <CreditCard className="text-primary mx-auto mb-3 h-10 w-10" />
                  <h3 className="font-semibold">Mitgliedsausweis</h3>
                  <p className="text-muted-foreground mt-1 text-xs">
                    Digital anzeigen
                  </p>
                </CardContent>
              </Card>
            </div>
          </main>
        </div>
      );
    }
  }

  // Not logged in or not a member — show login form
  return (
    <div className="bg-muted/30 min-h-screen">
      <header className="bg-background border-b px-6 py-4">
        <div className="mx-auto flex max-w-4xl items-center justify-between">
          <h1 className="text-lg font-bold">Mitgliederbereich</h1>
          <Link href={`/club/${slug}`}>
            <Button variant="ghost" size="sm">
              ← Zurück zur Website
            </Button>
          </Link>
        </div>
      </header>
      <main className="mx-auto max-w-4xl px-6 py-12">
        <PortalLoginForm slug={slug} accountName={String(account.name)} />
      </main>
    </div>
  );
}