import { createClient } from '@supabase/supabase-js';
import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
import { Button } from '@kit/ui/button';
import { UserCircle, FileText, CreditCard, Shield } from 'lucide-react';
import Link from 'next/link';

import { PortalLoginForm } from '@kit/site-builder/components';

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="min-h-screen bg-muted/30">
          <header className="border-b bg-background px-6 py-4">
            <div className="flex items-center justify-between max-w-4xl mx-auto">
              <div className="flex items-center gap-3">
                <Shield className="h-5 w-5 text-primary" />
                <h1 className="text-lg font-bold">Mitgliederbereich — {String(account.name)}</h1>
              </div>
              <div className="flex items-center gap-3">
                <span className="text-sm text-muted-foreground">{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="max-w-4xl mx-auto py-12 px-6">
            <h2 className="text-2xl font-bold mb-6">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 transition-colors cursor-pointer">
                  <CardContent className="p-6 text-center">
                    <UserCircle className="mx-auto h-10 w-10 text-primary mb-3" />
                    <h3 className="font-semibold">Mein Profil</h3>
                    <p className="text-xs text-muted-foreground mt-1">Kontaktdaten und Datenschutz</p>
                  </CardContent>
                </Card>
              </Link>
              <Link href={`/club/${slug}/portal/documents`}>
                <Card className="hover:border-primary transition-colors cursor-pointer">
                  <CardContent className="p-6 text-center">
                    <FileText className="mx-auto h-10 w-10 text-primary mb-3" />
                    <h3 className="font-semibold">Dokumente</h3>
                    <p className="text-xs text-muted-foreground mt-1">Rechnungen und Bescheinigungen</p>
                  </CardContent>
                </Card>
              </Link>
              <Card>
                <CardContent className="p-6 text-center">
                  <CreditCard className="mx-auto h-10 w-10 text-primary mb-3" />
                  <h3 className="font-semibold">Mitgliedsausweis</h3>
                  <p className="text-xs text-muted-foreground mt-1">Digital anzeigen</p>
                </CardContent>
              </Card>
            </div>
          </main>
        </div>
      );
    }
  }

  // Not logged in or not a member — show login form
  return (
    <div className="min-h-screen bg-muted/30">
      <header className="border-b bg-background px-6 py-4">
        <div className="flex items-center justify-between max-w-4xl mx-auto">
          <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="max-w-4xl mx-auto py-12 px-6">
        <PortalLoginForm slug={slug} accountName={String(account.name)} />
      </main>
    </div>
  );
}