'use client';

import { useState } from 'react';
import { useDSGVO } from '@breakpilot/compliance-sdk-react';
import Link from 'next/link';
import {
  ArrowLeft,
  ClipboardCheck,
  Plus,
  Search,
  Filter,
  MoreVertical,
  CheckCircle,
  XCircle,
  Clock,
} from 'lucide-react';

export default function ConsentManagementPage() {
  const { consents, grantConsent, revokeConsent, isLoading } = useDSGVO();
  const [searchQuery, setSearchQuery] = useState('');
  const [filterPurpose, setFilterPurpose] = useState<string>('all');

  const purposes = [
    { id: 'analytics', name: 'Analytics', description: 'Website usage tracking' },
    { id: 'marketing', name: 'Marketing', description: 'Marketing communications' },
    { id: 'functional', name: 'Functional', description: 'Enhanced features' },
    { id: 'necessary', name: 'Necessary', description: 'Essential cookies' },
  ];

  const filteredConsents = consents?.filter((consent) => {
    const matchesSearch =
      consent.userId.toLowerCase().includes(searchQuery.toLowerCase()) ||
      consent.purpose.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesPurpose =
      filterPurpose === 'all' || consent.purpose === filterPurpose;
    return matchesSearch && matchesPurpose;
  });

  const stats = {
    total: consents?.length ?? 0,
    granted: consents?.filter((c) => c.granted).length ?? 0,
    revoked: consents?.filter((c) => !c.granted).length ?? 0,
    pending: consents?.filter((c) => c.granted === null).length ?? 0,
  };

  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b bg-card">
        <div className="container mx-auto px-6 py-4">
          <div className="flex items-center gap-4">
            <Link
              href="/dsgvo"
              className="p-2 hover:bg-muted rounded-lg transition-colors"
            >
              <ArrowLeft className="h-5 w-5" />
            </Link>
            <div className="flex items-center gap-3">
              <div className="p-2 rounded-lg bg-blue-500/10">
                <ClipboardCheck className="h-6 w-6 text-blue-500" />
              </div>
              <div>
                <h1 className="text-xl font-semibold">Einwilligungen</h1>
                <p className="text-sm text-muted-foreground">
                  Art. 6, 7 DSGVO - Consent Management
                </p>
              </div>
            </div>
          </div>
        </div>
      </header>

      <main className="container mx-auto px-6 py-8">
        {/* Stats */}
        <div className="grid grid-cols-4 gap-4 mb-8">
          <div className="bg-card border rounded-lg p-4">
            <div className="text-2xl font-bold">{stats.total}</div>
            <div className="text-sm text-muted-foreground">Total</div>
          </div>
          <div className="bg-card border rounded-lg p-4">
            <div className="text-2xl font-bold text-green-500">
              {stats.granted}
            </div>
            <div className="text-sm text-muted-foreground">Granted</div>
          </div>
          <div className="bg-card border rounded-lg p-4">
            <div className="text-2xl font-bold text-red-500">
              {stats.revoked}
            </div>
            <div className="text-sm text-muted-foreground">Revoked</div>
          </div>
          <div className="bg-card border rounded-lg p-4">
            <div className="text-2xl font-bold text-yellow-500">
              {stats.pending}
            </div>
            <div className="text-sm text-muted-foreground">Pending</div>
          </div>
        </div>

        {/* Filters */}
        <div className="flex items-center gap-4 mb-6">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <input
              type="text"
              placeholder="Search by user or purpose..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full pl-10 pr-4 py-2 border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary"
            />
          </div>
          <select
            value={filterPurpose}
            onChange={(e) => setFilterPurpose(e.target.value)}
            className="px-4 py-2 border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary"
          >
            <option value="all">All Purposes</option>
            {purposes.map((p) => (
              <option key={p.id} value={p.id}>
                {p.name}
              </option>
            ))}
          </select>
        </div>

        {/* Consent List */}
        <div className="bg-card border rounded-xl overflow-hidden">
          <table className="w-full">
            <thead className="bg-muted/50 border-b">
              <tr>
                <th className="text-left px-6 py-3 text-sm font-medium">
                  User ID
                </th>
                <th className="text-left px-6 py-3 text-sm font-medium">
                  Purpose
                </th>
                <th className="text-left px-6 py-3 text-sm font-medium">
                  Status
                </th>
                <th className="text-left px-6 py-3 text-sm font-medium">
                  Source
                </th>
                <th className="text-left px-6 py-3 text-sm font-medium">
                  Created
                </th>
                <th className="text-right px-6 py-3 text-sm font-medium">
                  Actions
                </th>
              </tr>
            </thead>
            <tbody className="divide-y">
              {filteredConsents?.map((consent) => (
                <tr key={consent.id} className="hover:bg-muted/30">
                  <td className="px-6 py-4">
                    <span className="font-mono text-sm">{consent.userId}</span>
                  </td>
                  <td className="px-6 py-4">
                    <span className="capitalize">{consent.purpose}</span>
                  </td>
                  <td className="px-6 py-4">
                    {consent.granted ? (
                      <span className="inline-flex items-center gap-1 text-green-500">
                        <CheckCircle className="h-4 w-4" />
                        Granted
                      </span>
                    ) : consent.granted === false ? (
                      <span className="inline-flex items-center gap-1 text-red-500">
                        <XCircle className="h-4 w-4" />
                        Revoked
                      </span>
                    ) : (
                      <span className="inline-flex items-center gap-1 text-yellow-500">
                        <Clock className="h-4 w-4" />
                        Pending
                      </span>
                    )}
                  </td>
                  <td className="px-6 py-4 text-sm text-muted-foreground">
                    {consent.source || 'Website'}
                  </td>
                  <td className="px-6 py-4 text-sm text-muted-foreground">
                    {consent.createdAt
                      ? new Date(consent.createdAt).toLocaleDateString('de-DE')
                      : '-'}
                  </td>
                  <td className="px-6 py-4 text-right">
                    <button className="p-2 hover:bg-muted rounded-lg">
                      <MoreVertical className="h-4 w-4" />
                    </button>
                  </td>
                </tr>
              ))}
              {(!filteredConsents || filteredConsents.length === 0) && (
                <tr>
                  <td
                    colSpan={6}
                    className="px-6 py-12 text-center text-muted-foreground"
                  >
                    No consents found
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </main>
    </div>
  );
}