import { Link } from "react-router";
import { Badge } from "~/components/ui/badge";

type LinkedAccount = {
  id: string;
  providerId: string;
};

type Props = {
  email: string;
  linkedAccounts: LinkedAccount[];
};

const PROVIDER_LABELS: Record<string, string> = {
  credential: "Email & Password",
  google: "Google",
  discord: "Discord",
};

export function AccountSection({ email, linkedAccounts }: Props) {
  const hasPassword = linkedAccounts.some((a) => a.providerId === "credential");
  const oauthAccounts = linkedAccounts.filter((a) => a.providerId !== "credential");

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-lg font-semibold">Account</h2>
        <p className="text-sm text-muted-foreground">
          Your login email and connected providers.
        </p>
      </div>

      <div className="space-y-4">
        <div className="rounded-lg border p-4 space-y-3">
          <h3 className="text-sm font-medium">Email Address</h3>
          <p className="text-sm text-muted-foreground">{email}</p>
        </div>

        <div className="rounded-lg border p-4 space-y-3">
          <h3 className="text-sm font-medium">Sign-in Methods</h3>
          <div className="space-y-2">
            {hasPassword && (
              <div className="flex items-center justify-between">
                <span className="text-sm">Email &amp; Password</span>
                <Badge variant="secondary">Active</Badge>
              </div>
            )}
            {oauthAccounts.map((account) => (
              <div key={account.id} className="flex items-center justify-between">
                <span className="text-sm">
                  {PROVIDER_LABELS[account.providerId] ?? account.providerId}
                </span>
                <Badge variant="secondary">Connected</Badge>
              </div>
            ))}
            {linkedAccounts.length === 0 && (
              <p className="text-sm text-muted-foreground">No sign-in methods found.</p>
            )}
          </div>
        </div>

        {hasPassword && (
          <div className="rounded-lg border p-4 space-y-2">
            <h3 className="text-sm font-medium">Password</h3>
            <p className="text-sm text-muted-foreground">
              To change your password, use the forgot password flow.
            </p>
            <Link
              to="/forgot-password"
              className="text-sm text-primary underline-offset-4 hover:underline"
            >
              Reset password
            </Link>
          </div>
        )}
      </div>
    </div>
  );
}