import React, { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { partnerApi } from '../../api/partner';
import { useAuth } from '../../contexts/AuthContext';
import { AppLayout } from '../../components/layout/AppLayout';
import { PageLoader } from '../../components/ui/LoadingSpinner';
import { Building2, Search, ExternalLink, ArrowUpRight, ArrowDownRight, Plus } from 'lucide-react';
import type { Organization } from '../../types';

export function OrganizationsPage() {
  const [search, setSearch] = useState('');
  const [selectedOrg, setSelectedOrg] = useState<string | null>(null);
  const { hasCompanyPermission } = useAuth();

  const { data, isLoading } = useQuery({
    queryKey: ['organizations'],
    queryFn: () => partnerApi.getOrganizations(),
  });

  const organizations = data?.items ?? [];
  const canCreateOrg = hasCompanyPermission('create_org');

  const filtered = organizations.filter((org) =>
    org.name.toLowerCase().includes(search.toLowerCase()) ||
    org.location.toLowerCase().includes(search.toLowerCase())
  );

  if (isLoading) {
    return (
      <AppLayout title="Organizations">
        <PageLoader />
      </AppLayout>
    );
  }

  return (
    <AppLayout title="Organizations">
      {/* Header */}
      <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-xl sm:text-2xl font-bold text-surface-900 truncate">Organizations</h1>
          <p className="mt-1 text-sm text-surface-500">
            {organizations.length} organization{organizations.length !== 1 ? 's' : ''} in your portfolio
          </p>
        </div>
        <div className="flex items-center gap-3">
          {canCreateOrg && (
            <button
              className="inline-flex items-center gap-2 rounded-lg bg-brand-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-700 transition-colors min-h-[44px]"
            >
              <Plus className="h-4 w-4" />
              New Organization
            </button>
          )}
          <div className="relative">
            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-surface-400" />
            <input
              type="text"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Search organizations..."
              className="w-full rounded-lg border border-surface-300 py-2.5 pl-9 pr-4 text-sm outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-100 sm:w-72"
            />
          </div>
        </div>
      </div>

      {/* Organizations Grid */}
      {filtered.length === 0 ? (
        <div className="flex flex-col items-center justify-center rounded-xl border border-surface-200 bg-white py-16">
          <Building2 className="h-12 w-12 text-surface-300" />
          <p className="mt-4 text-sm font-medium text-surface-700">
            {search ? 'No organizations match your search' : 'No organizations yet'}
          </p>
          <p className="mt-1 text-sm text-surface-500">
            {search ? 'Try a different search term' : 'Add your first organization to get started'}
          </p>
        </div>
      ) : (
        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
          {filtered.map((org) => (
            <div
              key={org.id}
              onClick={() => setSelectedOrg(selectedOrg === org.id ? null : org.id)}
              className={`cursor-pointer rounded-xl border bg-white p-5 transition-all hover:shadow-md ${
                selectedOrg === org.id ? 'border-brand-300 ring-2 ring-brand-100' : 'border-surface-200'
              }`}
            >
              {/* Org Header */}
              <div className="mb-3 flex items-start justify-between">
                <div className="flex items-center gap-3">
                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-brand-100 text-brand-600">
                    <Building2 className="h-5 w-5" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-surface-900">{org.name}</h3>
                    <p className="text-xs text-surface-500">{org.location || 'No location'}</p>
                  </div>
                </div>
                <span
                  className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${
                    org.status === 'active'
                      ? 'bg-success/10 text-success'
                      : 'bg-surface-200 text-surface-600'
                  }`}
                >
                  {org.status}
                </span>
              </div>

              {/* Stats Row */}
              <div className="grid grid-cols-3 gap-4">
                <div>
                  <p className="text-xs text-surface-500">Revenue</p>
                  <p className="text-sm font-semibold text-surface-900">
                    ${org.annual_revenue.toLocaleString()}
                  </p>
                </div>
                <div>
                  <p className="text-xs text-surface-500">Growth</p>
                  <div className="flex items-center gap-0.5">
                    {org.revenue_growth >= 0 ? (
                      <ArrowUpRight className="h-3 w-3 text-success" />
                    ) : (
                      <ArrowDownRight className="h-3 w-3 text-error" />
                    )}
                    <p
                      className={`text-sm font-semibold ${
                        org.revenue_growth >= 0 ? 'text-success' : 'text-error'
                      }`}
                    >
                      {Math.abs(org.revenue_growth).toFixed(1)}%
                    </p>
                  </div>
                </div>
                <div>
                  <p className="text-xs text-surface-500">Projects</p>
                  <p className="text-sm font-semibold text-surface-900">{org.active_projects}</p>
                </div>
              </div>

              {/* Expanded Details */}
              {selectedOrg === org.id && (
                <div className="mt-4 animate-fade-in rounded-lg bg-surface-50 p-4">
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
                    <div>
                      <span className="text-surface-500">Tier:</span>{' '}
                      <span className="font-medium capitalize">{org.tier}</span>
                    </div>
                    <div>
                      <span className="text-surface-500">Industry:</span>{' '}
                      <span className="font-medium">{org.industry}</span>
                    </div>
                    <div>
                      <span className="text-surface-500">Target:</span>{' '}
                      <span className="font-medium">${org.target_revenue.toLocaleString()}</span>
                    </div>
                    <div>
                      <span className="text-surface-500">Commission:</span>{' '}
                      <span className="font-medium">{(org.commission_rate * 100).toFixed(0)}%</span>
                    </div>
                  </div>
                  {org.website && (
                    <a
                      href={org.website}
                      target="_blank"
                      rel="noopener noreferrer"
                      onClick={(e) => e.stopPropagation()}
                      className="mt-3 inline-flex items-center gap-1 rounded-md px-2 py-1.5 text-sm font-medium text-brand-600 hover:text-brand-700 hover:bg-brand-50 transition-colors min-h-[44px]"
                    >
                      Visit Website <ExternalLink className="h-3 w-3" />
                    </a>
                  )}
                </div>
              )}
            </div>
          ))}
        </div>
      )}
    </AppLayout>
  );
}