dyolink/frontend/src/components/ui/organization/OrganizationSelectorContent.tsx

'use client';

import { useState } from 'react';
import { useAuth } from '@/lib/hooks/useAuth';
import { Building2, Beaker, Mail, Plus } from 'lucide-react';
import { Input } from '@/components/ui/common/Input';
import { Button } from '@/components/ui/common/Button';

export function OrganizationSelectorContent() {
  const { organizations, selectOrganization, createOrganization, isLoading, error, clearError } = useAuth();
  const [isCreateOpen, setIsCreateOpen] = useState(false);
  const [organizationName, setOrganizationName] = useState('');
  const [organizationEmail, setOrganizationEmail] = useState('');
  const [organizationType, setOrganizationType] = useState<'CLINIC' | 'LAB'>('CLINIC');

  const getIcon = (type: string) =>
    type === 'CLINIC' ? <Building2 className="h-8 w-8 icon-flat" /> : <Beaker className="h-8 w-8 icon-flat" />;

  const handleCreateOrganization = async () => {
    try {
      clearError();
      const createdId = await createOrganization(
        organizationName.trim(),
        organizationEmail.trim(),
        organizationType,
      );
      setOrganizationName('');
      setOrganizationEmail('');
      setOrganizationType('CLINIC');
      setIsCreateOpen(false);
      await selectOrganization(createdId);
    } catch {
      // handled by auth context
    }
  };

  if (isLoading) {
    return <p className="text-text-secondary">Loading...</p>;
  }

  return (
    <div className="space-y-6">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-3xl font-semibold text-text-primary">Organizations</h1>
          <p className="text-text-secondary mt-2">
            Select an organization to continue, or create a new one.
          </p>
        </div>
        <Button
          type="button"
          variant={isCreateOpen ? 'outline' : 'primary'}
          onClick={() => {
            clearError();
            setIsCreateOpen((prev) => !prev);
          }}
        >
          <Plus className="h-4 w-4 mr-2 icon-flat" />
          {isCreateOpen ? 'Cancel' : 'Create Organization'}
        </Button>
      </div>

      {isCreateOpen && (
        <div className="surface-card p-6 space-y-4">
          <Input
            label="Organization name"
            value={organizationName}
            onChange={(event) => setOrganizationName(event.target.value)}
            placeholder="Sunshine Dental Clinic"
            icon={<Building2 className="h-5 w-5 icon-flat" />}
          />
          <Input
            label="Organization email"
            value={organizationEmail}
            onChange={(event) => setOrganizationEmail(event.target.value)}
            placeholder="contact@sunshineclinic.com"
            type="email"
            icon={<Mail className="h-5 w-5 icon-flat" />}
          />
          <div>
            <label className="block text-sm font-medium text-text-secondary mb-2">
              Organization type
            </label>
            <div className="grid grid-cols-2 gap-3">
              <button
                type="button"
                onClick={() => setOrganizationType('CLINIC')}
                className={`p-3 border rounded-[var(--radius-md)] text-sm ${
                  organizationType === 'CLINIC'
                    ? 'border-primary/60 bg-primary-soft text-text-primary'
                    : 'border-border text-text-secondary hover:border-border-strong'
                }`}
              >
                Dental Clinic
              </button>
              <button
                type="button"
                onClick={() => setOrganizationType('LAB')}
                className={`p-3 border rounded-[var(--radius-md)] text-sm ${
                  organizationType === 'LAB'
                    ? 'border-primary/60 bg-primary-soft text-text-primary'
                    : 'border-border text-text-secondary hover:border-border-strong'
                }`}
              >
                Dental Lab
              </button>
            </div>
          </div>
          {error && (
            <div className="p-3 bg-red-950/30 border border-red-600/40 rounded-[var(--radius-md)]">
              <p className="text-sm text-red-600">{error}</p>
            </div>
          )}
          <div className="flex justify-end">
            <Button
              type="button"
              variant="primary"
              onClick={handleCreateOrganization}
              isLoading={isLoading}
              disabled={!organizationName.trim() || !organizationEmail.trim()}
            >
              Create and Continue
            </Button>
          </div>
        </div>
      )}

      {!organizations.length ? (
        <div className="surface-card p-8 text-center">
          <p className="text-text-secondary">No organizations found. Create your first one to continue.</p>
        </div>
      ) : (
        <div className="grid gap-4">
          {organizations.map((org) => (
            <button
              key={org.id}
              onClick={() => selectOrganization(org.id)}
              className="surface-card p-6 transition-all text-left flex items-center gap-4 hover:border-primary/60"
            >
              <div className="p-3 bg-primary-soft rounded-[var(--radius-sm)] text-primary">
                {getIcon(org.type)}
              </div>

              <div className="flex-1">
                <h3 className="text-lg font-semibold text-text-primary">
                  {org.name}
                </h3>
                <p className="text-sm text-text-secondary">
                  {org.type === 'CLINIC' ? 'Dental Clinic' : 'Dental Lab'}
                </p>
              </div>

              <div className="text-primary text-sm">
                Continue →
              </div>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}